.offer{display:inline-block;background:#9c5a2b;color:#fffdf6;font-weight:800;font-size:12px;padding:5px 11px;border-radius:999px;margin:0 0 10px}
.card h1{margin:0 0 12px}
.price-then{margin:0 0 14px;font-size:17px}
fieldset.step{border:0;margin:0;padding:0;min-width:0}
fieldset.step legend{font-weight:800;font-size:1.15rem;color:#153d3b;padding:0;margin:0 0 6px}
.hint{font-size:.95rem;color:#4a5f6b;margin:.2rem 0 .8rem}
.muted{color:#4a5f6b;font-size:.92rem}
.small{font-size:.85rem}
#start-form label{margin:0 0 12px}
#start-form input,#start-form select{min-height:48px;font-size:16px}
#start-form select{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:10px;border:1px solid #9fb2bd;border-radius:10px;font:inherit;background:#fff}
#start-form [aria-invalid=true]{border-color:#922f22;outline:2px solid #922f22;outline-offset:0}
.row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
#start-form .row label{margin:0 0 12px;min-width:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Voortgang */
.progress-wrap{margin:0 0 16px}
.step-label{margin:0 0 6px;font-weight:700;font-size:.9rem;color:#1f5450}
.progress{height:8px;border-radius:999px;background:#e3eadf;overflow:hidden}
.progress span{display:block;height:100%;width:25%;background:#1f6b4f;border-radius:999px;transition:width .25s}
.progress[data-step="2"] span{width:50%}.progress[data-step="3"] span{width:75%}.progress[data-step="4"] span{width:100%}
.steps{display:flex;justify-content:space-between;list-style:none;margin:6px 0 0;padding:0;font-size:.8rem;color:#4a5f6b}
.steps li.now{color:#153d3b;font-weight:800}.steps li.done{color:#1f6b4f}
@media (prefers-reduced-motion:reduce){.progress span{transition:none}}

/* Ingeklapte extra's (KvK, flyercode) */
details.more{margin:0 0 10px;border:1px solid #d9e3d2;border-radius:10px;padding:0 12px}
details.more summary{cursor:pointer;font-weight:600;color:#1f5450;min-height:44px;display:flex;align-items:center}
details.more[open]{padding-bottom:6px}
details.more label{margin-top:4px}

/* Knoppen */
.nav{display:flex;gap:10px;margin-top:8px}
.nav button{flex:1}
#prev{flex:0 0 auto;width:auto;padding-left:18px;padding-right:18px}
button.secondary{background:#fff;color:#1f5450;border:2px solid #1f6b4f}
button.link{background:none;color:#1f5450;text-decoration:underline;font-weight:600;padding:12px 0;width:auto;display:block}
.step-error:empty{display:none}
.step-error{color:#922f22;font-weight:600;margin:4px 0 8px}
#msg{margin:4px 0 8px;min-height:0}#msg:empty{display:none}

/* Wachtwoord */
.pw-row{display:flex;gap:8px;align-items:stretch;margin-top:6px}
.pw-row input{margin-top:0;flex:1;min-width:0}
.pw-toggle{width:auto;flex:0 0 auto;padding:0 14px;background:#fff;color:#1f5450;border:2px solid #1f6b4f;min-height:48px}
.pw-meter{height:6px;border-radius:999px;background:#e3eadf;margin:8px 0 4px;overflow:hidden}
.pw-meter span{display:block;height:100%;width:0;border-radius:999px;transition:width .2s}
.pw-meter[data-level=short] span{width:15%;background:#922f22}
.pw-meter[data-level="1"] span{width:40%;background:#9c5a2b}
.pw-meter[data-level="2"] span{width:70%;background:#2f6b4f}
.pw-meter[data-level="3"] span{width:100%;background:#1f6b4f}
.pw-info{margin:0 0 6px;font-size:.92rem;color:#1c2b33}#pw-count{font-weight:700;font-variant-numeric:tabular-nums}

.code-welkom{background:#edf3e5;border:1px solid #2f6b4f;border-radius:12px;padding:10px 12px;margin:0 0 12px;font-weight:700;color:#153d3b}
.consent{margin-top:10px}
.foot a{color:#1f5450}.card a{color:#1f5450}

/* Mobiel: alles van één stap in één scherm */
@media(max-width:560px){
 main{padding:8px 16px 20px}
 .logo img{width:132px;height:auto}
 .card{margin-top:10px;padding:16px;border-radius:14px}
 .card h1{font-size:1.25rem;margin-bottom:10px}
 .offer{margin-bottom:6px}
 .steps{display:none}
 .card:not([data-step="1"]) .offer,.card:not([data-step="1"]) h1,.card:not([data-step="1"]) .price-then{display:none}
 .price-then{font-size:15.5px;margin-bottom:10px}
 .hint{margin-bottom:.6rem}
 details.more summary{min-height:44px}
 .progress-wrap{margin-bottom:12px}
 #start-form label{margin-bottom:10px}
}

/* Zoekresultaten blijven in de leesvolgorde en zijn met toetsenbord te kiezen. */
.name-results{list-style:none;padding:0;margin:8px 0 16px;display:grid;gap:8px}
.name-results button{display:grid;gap:4px;text-align:left;width:100%;padding:12px 14px;background:#fff;color:#153d3b;border:1px solid #9fb2bd;border-radius:10px;overflow-wrap:anywhere}
.name-results button:hover,.name-results button:focus-visible{background:#edf3e5;border-color:#1f6b4f;outline:2px solid #1f6b4f;outline-offset:2px}
.name-results button.name-own{background:#153d3b;color:#fff;border-color:#153d3b;font-weight:600;text-align:center;justify-content:center}.name-results button.name-own:hover,.name-results button.name-own:focus-visible{background:#1f5250;color:#fff}
.name-results button span{font-size:.85rem;font-weight:400;color:#4a5f6b}
#name-search-status{margin:8px 0}

.quick-start{margin-top:16px;padding-top:16px;border-top:1px solid #d9e3d2}
.quick-detailed{display:block;margin:16px 0 8px;font-size:.9rem}
[hidden]{display:none!important}

.quick-resident{font-size:.85rem;color:#4a5f6b;margin:14px 0 0}
.quick-start .hint{margin-top:0}
.quick-start #account-reuse{background:#edf3e5;border-radius:8px;padding:10px;overflow-wrap:anywhere}
.card:has(.quick-start) #find-vve{font-size:.9rem;width:auto;padding:8px 12px;min-height:44px}

/* Eén rustige keuze en een duidelijke bevestiging van de gekozen bron. */
.start-path{display:flex;gap:8px;margin:4px 0 16px;padding:5px;border-radius:14px;background:#edf3e5}
.start-path button{flex:1;min-height:48px;padding:10px;border:1px solid transparent;border-radius:10px;background:transparent;color:#153d3b;font-size:.9rem;line-height:1.35}
.start-path button[aria-pressed=true]{background:#153d3b;color:#fff;box-shadow:0 2px 5px #153d3b20}
.selected-vve{padding:12px 14px;border-left:3px solid #1f6b4f;background:#edf3e5;border-radius:8px;margin:12px 0;overflow-wrap:anywhere}
.start-promise{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 10px;color:#4a5f6b;font-size:.8rem}
.name-results{max-height:min(60vh,520px);overflow-y:auto;padding:3px}
.card:has(.quick-start) .price-then{font-size:.88rem;color:#4a5f6b}
@media(max-width:380px){.start-path{flex-direction:column}.start-promise{gap:6px 12px}}

.existing-open{display:inline-flex;align-items:center;min-height:48px;background:#153d3b;border-radius:10px;padding:10px 18px;color:#fff!important;font-weight:700;text-decoration:none}