/* FvdM registratieportaal — mobiel eerst, ontwerp ontwerp.png */
:root{--bg:#eef2f8;--wit:#fff;--navy:#131f5e;--blauw:#0059d0;--blauw-l:#e6f0fd;--tekst:#1d2433;--grijs:#5b6479;--lijn:#dbe2ee;--rood:#b42318;--rood-l:#fdecea;--groen:#13795b;--groen-l:#e7f6ef;--r:14px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tekst);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.vel{max-width:980px;margin:12px auto;background:var(--wit);border-radius:18px;box-shadow:0 2px 14px rgba(19,31,94,.07);min-height:calc(100vh - 24px);display:flex;flex-direction:column}
.kop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 16px 14px;border-bottom:1px solid var(--lijn)}
.merk{width:170px;height:auto;display:block}.merklink{display:block;line-height:0}
.kop .sep{display:none}.portaal{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grijs)}
main{flex:1;padding:18px 16px 24px}
h1{color:var(--navy);font-size:1.45rem;line-height:1.2;margin:.2em 0 .3em;font-weight:800}
h2{color:var(--navy);font-size:1.12rem;margin:0 0 12px;text-align:center}h3{color:var(--navy);font-size:1rem;margin:0}
.sub{color:var(--grijs);margin:0 0 14px}.eyebrow{color:var(--blauw);font-weight:700;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;margin:0}
.hero{text-align:center;padding:4px 0 18px;border-bottom:1px solid var(--lijn)}.hero.los{border:0;padding:30px 0}
.kiestaal{font-size:.86rem;font-weight:600;margin:6px 0 8px}
.talen{display:flex;gap:10px;justify-content:center;margin:0 0 8px}
.taal{flex:1;max-width:220px;min-height:46px;border:1.5px solid var(--blauw);background:var(--wit);color:var(--navy);border-radius:8px;font:inherit;font-weight:600;cursor:pointer}
.taal small{font-size:.7rem;font-weight:700;margin-right:6px}.taal.aan{background:var(--blauw);color:#fff}
.blok{padding:18px 0;border-bottom:1px solid var(--lijn)}.blok:last-child{border:0}
.kaarten{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kaart{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px;border:1.5px solid #8fb4ea;border-radius:10px;background:var(--wit);color:var(--navy);font:inherit;cursor:pointer;text-align:center;min-height:130px;justify-content:center}
.kaart:hover,.kaart:focus-visible,.kaart.gekozen{border-color:var(--blauw);background:var(--blauw-l)}
.kaart .ic{width:46px;height:46px;color:var(--blauw)}.kaart b{font-size:1rem}.kaart span{font-size:.78rem;color:var(--grijs)}
.uitleg{list-style:none;margin:0 auto;padding:0;max-width:640px}
.uitleg li{display:flex;gap:14px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--lijn)}.uitleg li:last-child{border:0}
.bol{flex:none;width:32px;height:32px;border-radius:50%;background:var(--blauw-l);color:var(--blauw);font-weight:800;display:grid;place-items:center}
.uitleg b{display:block;color:var(--navy);font-size:.95rem}.uitleg span{font-size:.84rem;color:var(--grijs)}
.hint{text-align:center;color:var(--grijs);font-size:.86rem;margin:12px 0 0}
.voet{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;padding:14px;border-top:1px solid var(--lijn);font-size:.8rem;color:var(--grijs)}
.voet .sep{width:1px;height:14px;background:var(--lijn)}.voet a{color:var(--navy)}
a{color:var(--blauw)}
.stappen{list-style:none;display:flex;padding:0;margin:0 0 16px;gap:4px}
.stappen li{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.7rem;color:var(--grijs);text-align:center;position:relative}
.stappen li:not(:last-child)::after{content:"";position:absolute;top:15px;left:calc(50% + 18px);right:calc(-50% + 18px);height:2px;background:var(--lijn)}
.stappen .nr{width:30px;height:30px;border-radius:50%;border:2px solid var(--lijn);display:grid;place-items:center;font-weight:800;background:#fff}
.stappen .nu .nr{background:var(--blauw);border-color:var(--blauw);color:#fff}.stappen .nu{color:var(--navy);font-weight:700}
.stappen .af .nr{background:var(--blauw-l);border-color:var(--blauw);color:var(--blauw)}
.stappen .lbl{display:none}
.stapkop{text-align:center}.stapkop+.talen{margin-bottom:14px}.stapkop+.talen .taal{min-height:36px;font-size:.85rem}
.kaart-wit{border:1px solid var(--lijn);border-radius:var(--r);padding:16px;margin:0 0 14px;background:#fff}.kaart-wit.plat{border:0;padding:0}.kaart-wit.smal{max-width:420px;margin:20px auto}
fieldset{border:0;padding:0;margin:0 0 16px}legend{font-weight:800;color:var(--navy);margin-bottom:8px;font-size:1.02rem}
.velden{display:grid;gap:12px}
.veld{display:flex;flex-direction:column;gap:4px;font-size:.9rem;font-weight:600}.veld em{font-weight:400;color:var(--grijs);font-style:normal;font-size:.8rem}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=date],input:not([type]){font:inherit;font-weight:400;padding:11px 12px;border:1.5px solid #c3cde0;border-radius:8px;min-height:46px;width:100%;background:#fff}
input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #8fb4ea;outline-offset:2px}
.veld.fout input{border-color:var(--rood);background:#fffafa}.foutmelding{color:var(--rood);font-weight:600}
.msg{padding:10px 12px;border-radius:8px;margin:0 0 12px;font-size:.9rem}.msg.err{background:var(--rood-l);color:var(--rood)}.msg.ok{background:var(--groen-l);color:var(--groen)}.msg.info{background:var(--blauw-l);color:var(--navy)}
.ph{background:#fff4c2;color:#7a5b00;border-radius:4px;padding:0 4px;font-weight:700}
.nav{display:flex;gap:10px;justify-content:space-between;margin-top:16px;flex-wrap:wrap}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:10px 18px;border-radius:8px;border:1.5px solid var(--blauw);background:var(--blauw);color:#fff;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.knop.alt{background:#fff;color:var(--blauw)}.knop.klein{min-height:38px;padding:6px 12px;font-size:.88rem}
.nav .knop{flex:1}.nav .knop:last-child{flex:2}
.doc{border:1px solid var(--lijn);border-radius:var(--r);padding:14px;margin:0 0 12px}.doc.ok{border-color:#9fd8c2;background:#fbfffd}
.dockop{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.dockop em{font-weight:400;font-style:normal;color:var(--grijs);font-size:.8rem}
.status{font-size:.78rem;color:var(--grijs);white-space:nowrap}.doc.ok .status{color:var(--groen);font-weight:700}
.doc .hint{text-align:left;margin:6px 0 0}
.bestanden{margin:8px 0 0;padding-left:18px;font-size:.88rem}.bestanden small{color:var(--grijs)}
.upload{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.kies{flex:1 1 100%;display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:var(--grijs)}.kies input{font-size:.88rem;width:100%}
.toegestaan{color:var(--grijs);font-size:.76rem}
.fdocs{list-style:none;padding:0;margin:10px 0}.fdoc{border:1px solid var(--lijn);border-radius:10px;padding:12px;margin-bottom:10px}
.fdoc>div{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.vink{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-size:.92rem;cursor:pointer}.vink input{width:22px;height:22px;flex:none;margin:0}
#teken{width:100%;margin-top:8px}
.overzicht{border-bottom:1px solid var(--lijn);padding:0 0 12px;margin:0 0 12px}.okop{display:flex;justify-content:space-between;align-items:center}.okop h2{margin:0;text-align:left}
dl{margin:6px 0 10px}dl div{display:flex;flex-direction:column;padding:4px 0;border-bottom:1px dashed var(--lijn)}dt{font-size:.8rem;color:var(--grijs)}dd{margin:0;font-weight:600;word-break:break-word}
.check{list-style:none;padding:0;margin:6px 0}.check li::before{content:"\2022  "}.check li.ok::before{content:"\2713  ";color:var(--groen)}.check li.mist{color:var(--rood)}.check li.mist::before{content:"\2717  "}
p.ok{color:var(--groen);font-weight:600}p.mist{color:var(--rood);font-weight:600}
.tekst h1{font-size:1.25rem}
.rij{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.rij .veld{flex:0 0 150px}
.link{font-family:ui-monospace,monospace;font-size:.82rem}
.invs{list-style:none;padding:0}.inv{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--lijn);font-size:.88rem}.inv.gebruikt span,.inv.verlopen span{color:var(--grijs)}
@media (min-width:760px){
 .vel{margin:24px auto}
 .kop{flex-direction:row;justify-content:flex-start;gap:20px;padding:18px 28px}.merk{width:200px}.kop .sep{display:block;width:1px;height:26px;background:var(--lijn)}
 main{padding:26px 40px 30px}h1{font-size:2rem}.hero h1{font-size:2.15rem}.sub{font-size:1.08rem}h2{font-size:1.3rem}
 .kaarten{max-width:580px;margin:0 auto;gap:14px}.kaart{min-height:150px}.kaart .ic{width:56px;height:56px}.kaart b{font-size:1.12rem}.kaart span{font-size:.88rem}
 .stappen{max-width:640px;margin:0 auto 22px}.stappen .lbl{display:block}.stappen li{font-size:.78rem}
 .kaart-wit{padding:22px 26px;max-width:760px;margin-left:auto;margin-right:auto}.kaart-wit.plat{padding:0}
 .velden{grid-template-columns:1fr 1fr;gap:14px 18px}
 .doc{max-width:760px;margin-left:auto;margin-right:auto}.kies{flex:1 1 auto}.nav .knop{flex:0 0 auto;min-width:160px}
 .nav{max-width:760px;margin-left:auto;margin-right:auto}.kaart-wit .nav{max-width:none}
 dl{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}#teken{width:auto}
}
input[type=file]{font:inherit;font-size:.88rem;color:var(--grijs)}
input[type=file]::file-selector-button{font:inherit;font-weight:600;color:var(--blauw);background:#fff;border:1.5px solid var(--blauw);border-radius:8px;padding:7px 12px;margin-right:10px;cursor:pointer}
main>.msg{max-width:760px;margin-left:auto;margin-right:auto}
.knop.groot{min-height:54px;padding:12px 28px;font-size:1.05rem;margin-top:10px}
.bestanden li{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:2px 0}
.link-knop{background:none;border:0;color:var(--rood);font:inherit;font-size:.84rem;font-weight:600;text-decoration:underline;cursor:pointer;padding:6px 4px;min-height:32px}
.testbanner{background:#b42318;color:#fff;font-weight:700;text-align:center;padding:10px 12px;font-size:.92rem;line-height:1.35}
.voet{justify-content:flex-start}
.certs{flex:0 0 auto;margin-left:auto;display:flex;gap:8px;justify-content:flex-end;align-items:flex-end}
.cert{margin:0;display:flex;flex-direction:column;align-items:center;flex:none}.cert figcaption{margin-top:2px;font-size:9px;line-height:1.2;font-weight:700;color:#004546;letter-spacing:.02em;white-space:nowrap}.certs img{height:26px;width:auto;max-width:none;display:block;flex:none}
@media (min-width:760px){.voet{padding:14px 28px}.certs{gap:10px}.certs img{height:36px}.cert figcaption{font-size:11px}}
.extra{display:flex;justify-content:center;margin:0 0 14px}.extra .knop{width:100%;max-width:760px}
.bestanden li{display:flex;gap:8px;justify-content:space-between;align-items:flex-start}.bestanden li>span{min-width:0;word-break:break-all}.bestanden .link-knop{white-space:nowrap;word-break:normal;flex:none}
/* r16: bedrijfsgegevens rechtsboven; mobiel (<=600px) ingeklapt in <details>, desktop altijd open */
.kop{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr;column-gap:12px;row-gap:4px;align-items:start;padding:14px 16px 12px}
.kop .merklink{grid-column:1;grid-row:1}.kop .portaal{grid-column:1;grid-row:2;text-align:center;font-size:.62rem}.kop .sep{display:none}
.merk{width:150px}
.bedrijfvak{grid-column:2;grid-row:1/4;justify-self:end;align-self:start;min-width:0;text-align:right}
.bedrijf-vol,.bedrijf address{display:block;font-style:normal;font-size:12px;line-height:1.45;color:var(--grijs);text-align:right;white-space:nowrap}
.bedrijf-vol b,.bedrijf address b{color:var(--navy);font-weight:700}
.bedrijfvak a{color:var(--navy);text-decoration:none;white-space:nowrap}.bedrijfvak a:hover{text-decoration:underline}
.bedrijfvak span{white-space:nowrap}
.bedrijf{display:none}
.bedrijf summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--blauw);list-style:none;min-height:32px;display:flex;align-items:center;justify-content:flex-end;gap:4px;line-height:1.25}
.bedrijf summary::-webkit-details-marker{display:none}.bedrijf summary::after{content:"\25BE";font-size:.8rem}.bedrijf[open] summary::after{content:"\25B4"}
.bedrijf address{margin-top:4px}
@media (max-width:600px){.bedrijf-vol{display:none}.bedrijf{display:block;max-width:170px}}
@media (min-width:760px){.kop{display:flex;flex-direction:row;align-items:center;padding:18px 28px}.kop .sep{display:block}.kop .portaal{font-size:.72rem}.merk{width:200px}.bedrijfvak{margin-left:auto}.bedrijf-vol{font-size:13px}}