:root {
            --inkt: #16181d;
            --inkt-zacht: #5b6472;
            --lijn: #e2e5ea;
            --vlak: #ffffff;
            --grond: #f4f5f7;
            --accent: #1c4ed8;
            --accent-inkt: #ffffff;
            --goed: #10693c;
            --goed-vlak: #e9f6ef;
            --let-op: #8a5a00;
            --let-op-vlak: #fdf4e3;
            --kentekengeel: #f3d000;
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            padding: 24px 16px 40px;
            background: var(--grond);
            color: var(--inkt);
            font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        .blad { max-width: 560px; margin: 0 auto; }
        .formulier-merk { display: flex; align-items: center; gap: 16px; padding: 18px 24px; margin-bottom: 16px; border: 1px solid var(--lijn); border-radius: 14px; background: var(--vlak); }
        .formulier-merk strong { min-width: 0; overflow-wrap: anywhere; font-size: 17px; line-height: 1.4; }
        .formulier-logo { width: 150px; height: 54px; max-width: 35%; object-fit: contain; flex-shrink: 0; padding: 5px; background: #fff; border-radius: 5px; }

        .kaart {
            background: var(--vlak);
            border: 1px solid var(--lijn);
            border-radius: 14px;
            padding: 24px;
        }

        .kop { margin: 0 0 4px; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
        .onderkop { margin: 0 0 22px; color: var(--inkt-zacht); font-size: 15px; }
        .stap { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-zacht); }

        label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
        .hint { margin: 4px 0 0; font-size: 13px; color: var(--inkt-zacht); }

        input[type=text], input[type=email], input[type=number], input[type=tel], input[type=search], input[type=date], select, textarea {
            width: 100%;
            padding: 11px 12px;
            border: 1px solid #c9cfd8;
            border-radius: 9px;
            font: inherit;
            background: #fff;
            color: inherit;
        }

        input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

        .veld + .veld { margin-top: 16px; }
        .paar { display: flex; gap: 14px; }
        .paar > * { flex: 1 1 0; min-width: 0; }

        .kentekenveld {
            display: flex;
            align-items: stretch;
            border: 2px solid #1d1d1d;
            border-radius: 8px;
            overflow: hidden;
            background: var(--kentekengeel);
        }
        .kentekenveld .land {
            display: flex; align-items: center; justify-content: center;
            width: 34px; background: #0a3ca8; color: #fff;
            font-size: 12px; font-weight: 700; letter-spacing: .04em;
        }
        .kentekenveld input {
            border: 0; border-radius: 0; background: var(--kentekengeel);
            font-size: 27px; font-weight: 700; letter-spacing: .07em;
            text-transform: uppercase; text-align: center; padding: 9px 10px;
        }
        .kentekenveld input:focus { outline-offset: -3px; }

        button {
            width: 100%; margin-top: 22px; padding: 13px 18px;
            border: 0; border-radius: 9px;
            background: var(--accent); color: var(--accent-inkt);
            font: inherit; font-weight: 600; cursor: pointer;
        }
        button:hover { filter: brightness(1.08); }
        .terug { display: inline-block; margin-top: 16px; color: var(--inkt-zacht); font-size: 14px; }

        .melding { margin: 0 0 18px; padding: 12px 14px; border-radius: 9px; font-size: 14px; }
        .melding.fout { background: #fdecec; color: #8c1d1d; }
        .melding.goed { background: var(--goed-vlak); color: var(--goed); }
        .melding.letop { background: var(--let-op-vlak); color: var(--let-op); }
        .veldfout { margin: 6px 0 0; font-size: 13px; color: #a01c1c; }

        .vondst { margin: 0 0 20px; padding: 16px; border: 1px solid var(--lijn); border-radius: 11px; background: #fbfcfd; }
        .vondst h2 { margin: 0 0 2px; font-size: 18px; line-height: 1.3; }
        .vondst .spec { margin: 0; color: var(--inkt-zacht); font-size: 14px; }
        .vondst .bron { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--lijn); font-size: 13px; color: var(--inkt-zacht); }

        .plaat {
            display: inline-flex; align-items: center; gap: 6px;
            margin-bottom: 10px; padding: 3px 9px 3px 3px;
            border: 2px solid #1d1d1d; border-radius: 5px; background: var(--kentekengeel);
            font-weight: 700; letter-spacing: .06em; font-size: 15px; color: #1d1d1d;
        }
        .plaat span { background: #0a3ca8; color: #fff; border-radius: 3px; padding: 2px 4px; font-size: 10px; }

        details.anders { margin-top: 16px; border-top: 1px solid var(--lijn); padding-top: 14px; }
        details.anders summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accent); list-style-position: outside; }
        details.anders summary::marker { color: var(--inkt-zacht); }
        details.anders .veld { margin-top: 14px; }

.tussenkop { margin: 24px 0 8px; font-size: 15px; }
        .uitleg { margin: 0 0 10px; color: var(--inkt-zacht); font-size: 14px; }
        .code { margin: 0; padding: 13px 14px; overflow-x: auto; border: 1px solid var(--lijn); border-radius: 9px; background: #0f1319; color: #d7e2ee; font-size: 12.5px; line-height: 1.6; }
        .vestiginglijst { margin: 0; padding: 0; list-style: none; }
        .vestiginglijst li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--lijn); font-size: 14px; }
        .vestiginglijst code { color: var(--inkt-zacht); font-size: 12.5px; }
        .proef { width: 100%; height: 520px; border: 1px solid var(--lijn); border-radius: 11px; background: var(--grond); }

                .voet { margin: 18px 4px 0; font-size: 13px; color: var(--inkt-zacht); }

        @media (max-width: 520px) {
            .formulier-merk { gap: 12px; padding: 16px 20px; }
            .formulier-logo { width: 96px; height: 40px; }
            .paar { flex-direction: column; }
        }

/* Klantformulier: vaste websitehuisstijl, onafhankelijk van de browservoorkeur. */
:root { color-scheme: light; --inkt:#20272d; --inkt-zacht:#64707a; --lijn:#e0e5e9; --vlak:#fff; --veld:#fbfcfd; --goed:#176b45; --goed-vlak:#eaf6ef; --let-op:#765c22; --let-op-vlak:#faf4e5; }
body { margin:0; padding:48px 20px 32px; font-family:var(--formulier-font,"DM Sans",sans-serif); background:var(--grond,#f4f5f7); }
.blad { max-width:680px; border-radius:24px; background:var(--vlak); border:1px solid var(--lijn); box-shadow:0 12px 48px #14212e09; overflow:hidden; }
.formulier-merk { margin:0; padding:28px 36px; border:0; border-radius:0; border-top:5px solid var(--accent); border-bottom:1px solid var(--lijn); background:var(--vlak); color:var(--inkt); gap:20px; }
.formulier-logo { width:auto; max-width:180px; height:auto; max-height:60px; padding:0; border-radius:0; background:transparent; }
.formulier-merk strong { display:block; font-size:18px; letter-spacing:-.03em; }
.merk-label { display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--inkt-zacht); margin-bottom:4px; }
.merk-aanduiding { font-size:12px; color:var(--inkt-zacht); margin-left:auto; text-align:right; max-width:80px; }
/* Met een eigen website-achtergrond staat de kop in die kleur: het logo is erop omgezet en vormt zo geen blok. */
.formulier-merk[data-op-achtergrond] { background:var(--grond); color:var(--grond-inkt); }
.formulier-merk[data-op-achtergrond] .merk-label, .formulier-merk[data-op-achtergrond] .merk-aanduiding { color:color-mix(in srgb, var(--grond-inkt) 68%, var(--grond)); }
.kaart { border:0; border-radius:0; padding:30px 36px 36px; background:transparent; }
.kop { font:700 clamp(26px,4vw,34px)/1.18 var(--formulier-kop,"DM Sans",sans-serif); letter-spacing:-.035em; margin:26px 0 10px; }
.onderkop { font-size:15px; line-height:1.7; max-width:54ch; margin-bottom:26px; }
.formulier-voortgang { display:flex; flex-direction:column; gap:10px; }
.formulier-voortgang .stap { font-size:11px; margin:0; }
.formulier-voortgang ol { display:flex; list-style:none; padding:0; margin:0; gap:24px; }
.formulier-voortgang li { display:flex; align-items:center; gap:8px; color:var(--inkt-zacht); font-size:13px; }
.formulier-voortgang li span { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; border:1px solid var(--lijn); font-size:12px; }
.formulier-voortgang li[aria-current] { font-weight:700; color:var(--inkt); }
.formulier-voortgang li[aria-current] span, .formulier-voortgang li.voltooid span { background:var(--accent); color:var(--accent-inkt); border-color:var(--accent); }
input[type=text], input[type=email], input[type=number], input[type=tel], input[type=search], input[type=date], select, textarea { background:var(--veld); border:1px solid var(--lijn); border-radius:10px; padding:13px 14px; min-height:48px; color:var(--inkt); }
input::placeholder, textarea::placeholder { color:var(--inkt-zacht); opacity:.8; }
label { font-size:13px; font-weight:600; margin-bottom:7px; }
.hint { font-size:12px; line-height:1.6; margin-top:7px; }
.veld + .veld { margin-top:20px; }
.sectiekop { display:flex; align-items:flex-start; gap:12px; margin:32px 0 20px; padding-top:26px; border-top:1px solid var(--lijn); }
.sectiekop > span { font-size:11px; font-weight:700; color:var(--inkt-zacht); padding-top:4px; }
.sectiekop h2 { margin:0; font:700 19px/1.35 var(--formulier-kop,"DM Sans",sans-serif); letter-spacing:-.025em; }
.sectiekop p { margin:4px 0 0; font-size:13px; color:var(--inkt-zacht); }
.sectiekop > small { margin-left:auto; background:var(--veld); border:1px solid var(--lijn); padding:3px 8px; border-radius:6px; color:var(--inkt-zacht); font-size:10px; }
button { border-radius:var(--knop-radius,12px); font-family:var(--formulier-kop,"DM Sans",sans-serif); min-height:50px; transition:filter .15s; }
button:hover { filter:brightness(.95); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid var(--inkt); outline-offset:4px; }
.kentekenveld { max-width:360px; margin:12px 0; }
.kentekenveld input { color:#151515; min-height:64px; font-size:32px; background:var(--kentekengeel); }
.kentekenveld .land { width:44px; }
.vondst { padding:22px; background:var(--veld); }
.vondst h2 { font-family:var(--formulier-kop,"DM Sans",sans-serif); }
.melding { line-height:1.6; }
.voet { margin:0; padding:20px 36px; border-top:1px solid var(--lijn); text-align:center; font-size:11px; color:var(--inkt-zacht); }
/* Het aanbod hoort alleen bij een inruil; zonder die keuze blijft het weg, ook zonder script. */
.voorraadkeuze { display:none; }
form:has(input[name="aanvraagdoel"][value="inruil"]:checked) .voorraadkeuze { display:block; }
.voorraad-opties { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0; border:0; margin:16px 0 0; min-width:0; }
.voorraad-optie { position:relative; display:flex; align-items:flex-start; gap:10px; margin:0; padding:17px; border:1px solid var(--lijn); border-radius:12px; background:var(--veld); cursor:pointer; transition:border-color .15s,box-shadow .15s; }
.voorraad-optie:hover { border-color:var(--inkt-zacht); }
.voorraad-optie:has(input:checked) { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--vlak)); }
.voorraad-optie:has(input:focus-visible) { outline:2px solid var(--inkt); outline-offset:3px; }
.voorraad-optie input { flex:0 0 auto; width:17px; height:17px; margin:2px 0 0; accent-color:var(--accent); }
.voorraad-optie > span { min-width:0; }
.voorraad-optie strong { font-weight:700; font-size:14px; line-height:1.4; display:block; overflow-wrap:anywhere; }
.voorraad-optie small { display:block; color:var(--inkt-zacht); font-size:11px; line-height:1.6; font-weight:400; margin-top:4px; }
.voorraad-geen { grid-column:1/-1; background:var(--vlak); align-items:center; }
.voorraad-prijs { display:block; margin-top:18px; font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.voorraad-prijs small { font-size:10px; letter-spacing:0; margin-top:0; }
.voorraad-meer { background:var(--vlak); border:1px solid var(--lijn); color:var(--inkt); padding:9px; min-height:40px; margin:12px 0 0; font-size:12px; }
.voorraad-voet { margin:18px 0 0; font-size:11px; line-height:1.6; color:var(--inkt-zacht); }
.voorraad-leeg { padding:18px; border:1px dashed var(--lijn); border-radius:12px; font-size:14px; }
[hidden] { display:none !important; }
.visueel-verborgen { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
body[data-formulier-thema="donker"] { color-scheme:dark; --inkt:#f2f4f5; --inkt-zacht:#aab2bb; --lijn:#353b42; --vlak:#191d21; --veld:#20262b; --goed:#8cddaf; --goed-vlak:#193027; --let-op:#e2c888; --let-op-vlak:#302b20; }
body[data-formulier-thema="donker"] .melding.fout { background:#341d21; color:#f8b1b9; }
body[data-formulier-thema="donker"] .veldfout { color:#f8b1b9; }

/* Het doel is één bewuste keuze, los van een eventuele auto uit de voorraad. */
.aanvraagdoel { min-width: 0; padding: 0; margin: 28px 0; border: 0; }
.aanvraagdoel legend { padding: 0; font: 700 19px/1.4 var(--formulier-kop, sans-serif); color: var(--inkt); }
.aanvraagdoel legend small { display: inline-block; font: 400 12px/1.4 var(--formulier-font, sans-serif); color: var(--inkt-zacht); }
.aanvraagdoel-keuzes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.aanvraagdoel-keuze { display: flex; align-items: start; gap: 9px; margin: 0; padding: 16px 12px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--veld); cursor: pointer; }
.aanvraagdoel-keuze:hover { border-color: var(--inkt-zacht); }
.aanvraagdoel-keuze:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--vlak)); }
.aanvraagdoel-keuze:has(input:focus-visible) { outline: 2px solid var(--inkt); outline-offset: 3px; }
.aanvraagdoel-keuze input { flex: 0 0 17px; width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--accent); }
.aanvraagdoel-keuze strong { display: block; font-size: 14px; color: var(--inkt); }
.aanvraagdoel-keuze small { display: block; margin-top: 5px; font-size: 12px; line-height: 1.5; font-weight: 400; color: var(--inkt-zacht); }
@media (max-width: 520px) { .aanvraagdoel-keuzes { grid-template-columns: 1fr; } .aanvraagdoel-keuze { padding: 16px; } }
@media(max-width:600px) { body { padding:16px 12px; }.blad { border-radius:18px; }.formulier-merk { padding:22px;gap:12px; }.formulier-logo { max-width:130px;max-height:44px; }.merk-aanduiding { display:none; }.kaart { padding:24px 22px; }.voet { padding:18px 22px; }.voorraad-opties { grid-template-columns:1fr; }.sectiekop { gap:9px; }.sectiekop > small { font-size:9px; }.formulier-merk strong { font-size:15px; }.merk-label { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none !important; } }
@media(forced-colors:active) { .voorraad-optie:has(input:checked) { outline:2px solid CanvasText; } }

.kop,.sectiekop h2 { text-transform:var(--kop-transform,none); }
.kentekenveld input::placeholder { color:#5b521e; opacity:1; }
button:not(.voorraad-meer) { text-transform:var(--kop-transform,none); }

.formulier-toelichting { padding:18px; border-left:3px solid var(--accent); background:var(--veld); overflow-wrap:anywhere; }
.formulier-toelichting h3 { font-size:16px; margin:0 0 8px; }
.formulier-toelichting p,.formulier-vraaghulp { white-space:pre-wrap; }
.formulier-toelichting p { margin:0; line-height:1.7; }
.formulier-voorwaarden { display:flex; flex-wrap:wrap; gap:10px 20px; padding:0 36px 24px; font-size:12px; line-height:1.6; color:var(--inkt-zacht); overflow-wrap:anywhere; }
.formulier-voorwaarden a { color:var(--accent); text-underline-offset:3px; }
.formulier-voorwaarden a:focus-visible { outline:2px solid var(--inkt); outline-offset:3px; }
@media(max-width:600px) { .formulier-voorwaarden { padding-inline:22px; } }
/* Fouten blijven naast de ingevulde gegevens, met een directe weg naar elk veld. */
.formulier-fouten h2 { margin:0 0 10px; font-size:18px; }
.formulier-fouten ul { margin:0 0 12px; padding-left:20px; }
.formulier-fouten li + li { margin-top:6px; }
.formulier-fouten a { color:inherit; text-underline-offset:3px; }
.formulier-fouten p { margin:0; }
[aria-invalid="true"] { border-color:#a01c1c; }
body[data-formulier-thema="donker"] [aria-invalid="true"] { border-color:#f8b1b9; }
.veld,.aanvraagdoel,[data-extra-vraag] { scroll-margin-top:24px; }
.terug { min-height:44px; padding-block:10px; }
@media(max-width:380px) { .kaart { padding-inline:16px; }.formulier-merk { padding-inline:16px; }.formulier-logo { max-width:96px; }.kentekenveld input { min-width:0; }.formulier-voortgang ol { gap:14px; } }