/* Start een project, één vraag tegelijk (v14, 20 oktober: variant A uit het prototype, _bron/start_a/a.css).
   Alleen op /start-een-project/ en /en/start-a-project/ (b_over.start). */
.sa{padding:calc(var(--kop-h) + clamp(24px,5vw,72px)) var(--rand) clamp(64px,8vw,120px);max-width:calc(980px + 2 * var(--rand));margin:0 auto;min-height:100svh}
.sa__form{display:block}
.sa__boven{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap;margin-bottom:clamp(26px,4.5vw,56px);min-height:44px}
.sa__label{margin:0}
.sa__teller{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--fg-2);margin-left:auto}
.sa__balk{display:flex;gap:6px;width:min(200px,34vw)}
.sa__balk i{flex:1;height:4px;border-radius:2px;background:var(--lijn-2);transition:background .3s}
.sa__balk i.is-aan{background:var(--or)}
.sa__terug{order:-1;min-height:44px;padding:0 4px;font-size:16px;color:var(--fg-2);background:none;border:0;cursor:pointer;font:inherit;display:inline-flex;align-items:center;gap:8px}
.sa__terug:hover{color:var(--fg)}
.sa__terug[hidden]{display:none}
.sa .stap-f{border:0;padding:0;margin:0;min-width:0;display:block}
.sa .stap-f+.stap-f{margin-top:clamp(56px,8vw,96px)}
html.js .sa .stap-f{margin-top:0}
html.js .sa .stap-f:not(.is-nu){display:none}
html.js .sa .stap-f.is-nu{animation:sa-in .45s var(--ease) both}
html.rustig .sa .stap-f.is-nu{animation:none}
@keyframes sa-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sa__vraag{display:block;padding:0;margin:0 0 16px;float:none;width:100%}
.sa__vraag-t{display:block;font-size:clamp(38px,6.2vw,76px);font-weight:500;line-height:.98;letter-spacing:calc(-.045em * var(--krap) + var(--lucht));max-width:16ch;outline:0}
.sa__vraag .punt{color:var(--or)}
.sa__hint{font-size:clamp(17px,1.5vw,20px);color:var(--fg-2);max-width:54ch;margin:0 0 clamp(24px,3.4vw,38px);line-height:1.4}
.sa__tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sa__tegels--twee{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.sa__tegels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sa__tegels,.sa__tegels--twee{grid-template-columns:1fr}}
.sa__tegel>span{padding:20px 52px 18px 20px;min-height:104px;align-content:start}
.sa__tegel b{font-size:clamp(18px,1.5vw,21px);line-height:1.15}
.sa__tegel i{font-size:14px}
@media (max-width:560px){.sa__tegel>span{min-height:0;padding:16px 50px 15px 18px}}
.sa__tegel>span::after{content:"";position:absolute;right:16px;top:16px;width:24px;height:24px;border-radius:50%;border:1px solid var(--lijn-2);transition:background .2s,border-color .2s}
.sa__tegel input[type=radio]+span::after{border-radius:50%}
.sa__tegel input:checked+span::after{background:var(--or) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1B' stroke-width='2.4'%3E%3Cpath d='M6.5 12.5l3.6 3.5 7.4-8'/%3E%3C/svg%3E") center/16px no-repeat;border-color:var(--or)}
.sa .wanneer__snel{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.sa .chip{font-size:16px;min-height:50px;padding:0 20px;cursor:pointer;font-family:inherit;color:inherit}
.sa .chip[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.sa .veld--datum{max-width:280px}
.sa .wanneer__uit{margin-top:14px;font-size:16px;min-height:1.4em}
.sa__opties{display:grid;gap:12px;max-width:640px}
.sa__optie{display:grid;gap:4px;text-align:left;width:100%;padding:18px 20px;border-radius:16px;border:1px solid var(--lijn-2);background:var(--wit);color:inherit;font:inherit;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.sa__optie b{font-size:clamp(18px,1.5vw,20px);font-weight:500;letter-spacing:-.02em}
.sa__optie i{font-style:normal;color:var(--fg-2);font-size:14px}
.sa__optie:hover{border-color:var(--fg)}
.sa__optie[aria-pressed=true]{border-color:var(--or);box-shadow:0 0 0 2px var(--or)}
.sa__optie:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
html.js .sa__paneel.is-dicht{display:none}
.sa__paneel{padding:6px 0 14px}
.sa__klein{font-size:14px;color:var(--fg-2);margin-top:8px}
html.no-js .sa__optie{display:none}
.sa__velden{max-width:720px}
.sa__meer{margin-top:22px;max-width:720px}
.sa__meer summary{cursor:pointer;font-size:16px;min-height:44px;display:flex;align-items:center;gap:8px;color:var(--fg)}
.sa__meer summary i{font-style:normal;color:var(--fg-2);font-size:13px}
.sa__meer summary::marker{color:var(--or)}
.sa__meer .velden{margin-top:14px}
.sa__samen{margin-top:clamp(30px,4vw,44px);max-width:720px;border-top:1px solid var(--lijn)}
.sa__samen .label{margin:16px 0 4px}
.sa__samen dl{display:grid;grid-template-columns:auto 1fr auto;column-gap:20px;margin:0}
.sa__samen dt,.sa__samen dd{padding:12px 0;border-bottom:1px solid var(--lijn);margin:0;font-size:16px}
.sa__samen dt{color:var(--fg-2)}
.sa__samen dd.is-leeg{color:var(--fg-2)}
.sa__wijzig{background:none;border:0;padding:0;font:inherit;font-size:15px;color:var(--or-tekst);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:24px}
html.no-js .sa__samen{display:none}
.sa__verstuur{margin-top:clamp(26px,3.4vw,40px);max-width:720px}
.sa__onder{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin-top:clamp(28px,4vw,48px)}
.sa__nood{font-size:15px;color:var(--fg-2);max-width:44ch}
html.no-js .sa__onder [data-sa-volgende],html.no-js .sa__teller{display:none}
.sa[data-stap="5"] .sa__onder{display:none}
@media (max-width:560px){.sa__onder{flex-direction:column-reverse;align-items:stretch}.sa__onder .knop{width:100%;justify-content:center}.sa__nood{text-align:center;max-width:none}}
.sa__bel{margin-top:clamp(36px,5vw,64px);font-size:15px;color:var(--fg-2)}
.sa__bel a{color:var(--fg)}
@media (max-width:560px){
  .sa__label{display:none}
  .sa__boven{flex-wrap:nowrap;margin-bottom:22px}
  .sa__teller{font-size:14px;gap:10px}
  .sa__balk{width:96px}
  .sa__onder{position:sticky;bottom:0;z-index:2;margin-top:8px;padding:28px 0 calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--bg) 26px);gap:10px}
  .sa__nood{font-size:13px}
}
