/* De leadfunnel op /analyse. Staat los van components.css, zodat de rest van de site er niet
   zwaarder van wordt. tools/maak-paginas.py laadt dit alleen op pagina's met kaal: ja. */

.kaalkop { position: relative; z-index: 2; padding-block: 1rem; }
.kaalkop .woordmerk { display: block; width: 7.5rem; color: var(--kleur-tekst); }
.kaalkop .woordmerk svg { display: block; width: 100%; height: auto; }
.kaalvoet { padding-block: 1.5rem; color: var(--kleur-tekst-2); font-size: 0.8125rem; }
.kaalvoet a { color: inherit; }

.analysehero .paginahero { max-width: 48rem; padding-top: clamp(1rem, 4vw, 2.5rem); }
.analysehero .kop-1 { max-width: 20ch; font-size: clamp(2.125rem, 6.5vw, 3.75rem); }

.analyselogos { display: flex; flex-wrap: wrap; gap: 0.625rem; list-style: none; padding-top: 0.5rem; }
.analyselogos img { display: block; width: 3.5rem; height: 3.5rem; object-fit: contain; padding: 0.25rem; border-radius: var(--radius-m); background: var(--vs-wit); box-shadow: var(--schaduw); }

.analyseblok { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 48rem) { .analyseblok { grid-template-columns: minmax(0, 20rem) 1fr; gap: 3rem; } }
.analysecase { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-l); background: var(--vs-navy); color: var(--vs-wit); }
.analysecase picture { display: contents; }
.analysecase img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.analysecase::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(6 0 46 / 0.94) 0%, rgb(6 0 46 / 0.55) 38%, rgb(6 0 46 / 0.05) 70%); }
.analysecase p { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: grid; gap: 0.125rem; padding: 1.25rem; }
.analysecase b { font-size: 1.25rem; font-weight: 800; }
.analysecase span { color: var(--d-tekst-2); font-size: 0.875rem; }
.analysecase strong { margin-top: 0.375rem; color: var(--vs-oranje); font-size: 1.25rem; font-weight: 800; line-height: 1.2; }

.analyseformulier { display: grid; gap: 1.5rem; max-width: 38rem; margin-inline: auto; }
.analyseformulier form { display: grid; gap: 1rem; padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--kleur-rand); border-radius: var(--radius-l); background: var(--kleur-achtergrond, var(--vs-wit)); box-shadow: var(--schaduw); }
.analyseslot { scroll-margin-top: 0; }
.analysevoortgang { color: var(--kleur-tekst-2); font-size: 0.875rem; font-weight: 700; }
.analysebalk { height: 0.375rem; overflow: hidden; border-radius: var(--radius-pil); background: var(--kleur-rand); }
.analysebalk span { display: block; width: 33.33%; height: 100%; border-radius: inherit; background: var(--vs-oranje); transition: width var(--duur); }

/* Het honeypot-veld staat buiten beeld. display: none vullen slimme bots niet in. */
.analysehoning { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.analysestap { display: grid; gap: 1.125rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.analysestap[hidden] { display: none; }
.analysestap legend { padding: 0; margin-bottom: 1.125rem; font-size: 1.25rem; font-weight: 800; }
.analysetwee { display: grid; gap: 1.125rem; }
@media (min-width: 30rem) { .analysetwee { grid-template-columns: 1fr 1fr; } }

.analyseveld { display: grid; gap: 0.375rem; min-width: 0; }
.analyseveld > label, .analyselabel { font-size: 0.9375rem; font-weight: 700; }
/* 16 pixels: kleiner en iPhone zoomt in zodra je in een veld tikt */
.analyseveld input[type="text"], .analyseveld input[type="email"], .analyseveld input[type="tel"], .analyseveld select {
  width: 100%; min-height: 3rem; padding: 0.625rem 0.875rem; border: 1px solid var(--kleur-rand-sterk, var(--kleur-tekst-2)); border-radius: var(--radius-m);
  background: transparent; color: var(--kleur-tekst); font: inherit; font-size: 1rem;
}
.analyseveld select option { color: var(--vs-navy); }
.analyseveld input:focus-visible, .analyseveld select:focus-visible { outline: 2px solid var(--kleur-tekst); outline-offset: 1px; }
.analyseveld [aria-invalid="true"] { border-color: #b3261e; }

.analysekeuzes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.analysekeuzes label { position: relative; cursor: pointer; }
.analysekeuzes input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.analysekeuzes span { display: block; padding: 0.625rem 0.875rem; border: 1px solid var(--kleur-rand-sterk, var(--kleur-tekst-2)); border-radius: var(--radius-pil); font-size: 0.9375rem; font-weight: 600; }
.analysekeuzes--drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.analysekeuzes--drie label { display: grid; }
.analysekeuzes--drie span { display: grid; place-items: center; padding: 0.625rem 0.125rem; border-radius: var(--radius-m); font-size: 0.75rem; line-height: 1.2; text-align: center; }
.analysekeuzes input:checked + span { border-color: var(--vs-oranje); background: var(--vs-oranje); color: var(--vs-navy); }
.analysekeuzes input:focus-visible + span { outline: 2px solid var(--kleur-tekst); outline-offset: 2px; }

.analysevink { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.875rem; font-weight: 500; }
.analysevink input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; accent-color: var(--vs-oranje); }

.analysefout { color: #b3261e; font-size: 0.8125rem; font-weight: 600; }
.analysefout:empty { display: none; }
:root[data-thema="donker"] .analysefout { color: #ffb4ab; }
.analysemelding { padding: 0.75rem 0.875rem; border-radius: var(--radius-m); background: var(--kleur-vlak); font-size: 0.9375rem; }
.analysenood { justify-self: start; }
.analysenood[hidden] { display: none; }

.analyseknoppen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; }
.analyseknoppen [data-analyse-verder], .analyseknoppen [data-analyse-verstuur] { margin-left: auto; }
.analyseknoppen [hidden] { display: none; }
.analyseknoppen [disabled] { opacity: 0.6; cursor: wait; }

.analysevideo { max-width: 48rem; margin-inline: auto; aspect-ratio: 16 / 9; }

@media (max-width: 34rem) {
  .analysecase { aspect-ratio: 16 / 11; }
  .analyseknoppen [data-analyse-verder], .analyseknoppen [data-analyse-verstuur] { flex: 1; justify-content: center; }
}