/* wltpberekenen.nl: gedeelde opmaak voor alle pagina's.
   Layout: smalle kopregel, rekentool in twee kolommen, tekstpagina's in één leeskolom.
   De uitkomst staat in een geel kenteken; routes op een blauw ANWB-achtig bord. */

@font-face{
  font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/atkinson-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/atkinson-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/atkinson-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/atkinson-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  color-scheme:light;
  --bg:#F6F6F2;
  --surface:#FFFFFF;
  --ink:#141412;
  --muted:#63635B;
  --line:#D9D8D0;
  --plate:#F5C400;
  --plate-ink:#141412;
  --eu:#1D3E9E;
  --link:#1D3E9E;
  --loss:#B4441C;
  --gain:#2A7A3F;
  --sign:#1C4596;
  --charge:#2E9E57;
  --charge-soft:#9BE0B1;
  --asphalt:#2E2E2B;
  --font:"Atkinson Hyperlegible", "Helvetica Neue", Arial, system-ui, sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55}
.wrap{
  max-width:1040px;margin:0 auto;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
h1,h2,h3{margin:0;font-weight:700;line-height:1.1;text-wrap:balance;letter-spacing:-.01em}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.hl{font-style:normal;background:linear-gradient(transparent 62%, var(--charge-soft) 62%, var(--charge-soft) 92%, transparent 92%)}
.hint{margin:0;color:var(--muted);font-size:.86rem}
[hidden]{display:none !important}

/* Kopregel en voet */
.site-head{padding-block:18px;border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.logo{font-weight:700;font-size:1.1rem;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.logo-name span{color:var(--muted);font-weight:400}
.logo-batt{position:relative;width:30px;height:16px;border:2.5px solid var(--ink);border-radius:4px;padding:2px;margin-right:4px;display:inline-flex;gap:2px}
.logo-batt::after{content:"";position:absolute;right:-6px;top:3px;width:3px;height:5px;background:var(--ink);border-radius:0 2px 2px 0}
.logo-batt i{flex:1;background:var(--charge);border-radius:1px}
.logo-batt i:last-child{background:transparent}
.nav{display:flex;gap:18px;flex-wrap:wrap;font-size:.95rem}
.nav a{color:var(--ink);text-decoration:none;font-weight:700}
.nav a:hover{text-decoration:underline}
footer{padding-block:24px 40px;color:var(--muted);font-size:.86rem;border-top:1px solid var(--line)}
footer p{margin:0 0 4px;max-width:80ch}
footer a{color:var(--muted)}

/* Intro */
.intro{padding-block:40px 32px;display:grid;gap:12px}
.intro h1{font-size:clamp(2.4rem, 6vw, 4rem);max-width:15ch;letter-spacing:-.02em}
.intro p{margin:0;color:var(--muted);font-size:1.05rem;max-width:56ch}

/* Formulieren */
.form{display:grid;gap:22px}
.row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))}
.field{display:grid;gap:6px;min-width:0}
.field > label, .label{font-weight:700;font-size:.95rem}
select, input[type="number"], input[type="search"]{
  width:100%;font:inherit;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:4px;padding:10px 12px;min-height:46px;
}
select:hover, input[type="number"]:hover{border-color:var(--muted)}
input[type="number"]{font-variant-numeric:tabular-nums}
input[type="search"]{border-color:var(--ink)}
.or{margin:-6px 0 -8px;color:var(--muted);font-size:.86rem}
.seg{display:flex;border:1.5px solid var(--ink);border-radius:4px;overflow:hidden}
.seg label{flex:1;cursor:pointer;position:relative}
.seg label + label{border-left:1.5px solid var(--ink)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;text-align:center;padding:10px 6px;font-weight:700;font-size:.92rem;background:var(--surface);color:var(--ink);line-height:1.25}
.seg span small{display:block;font-weight:400;font-size:.76rem;color:var(--muted)}
.seg input:checked + span{background:var(--ink);color:var(--bg)}
.seg input:checked + span small{color:var(--bg);opacity:.75}
.seg input:focus-visible + span{outline:2px solid var(--link);outline-offset:-4px}
.range-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.range-top output{font-weight:700;font-variant-numeric:tabular-nums}
input[type="range"]{width:100%;accent-color:var(--ink);min-height:28px}
.check{display:flex;gap:10px;align-items:center;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--ink);flex:none;margin:0}

/* Zoeken */
.search{position:relative}
.search-list{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;padding:4px 0;list-style:none;background:var(--surface);border:1.5px solid var(--ink);border-radius:4px;z-index:5;max-height:330px;overflow-y:auto;box-shadow:0 8px 24px rgba(20,20,18,.12)}
.search-list li{padding:9px 12px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.search-list li small{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.search-list li[aria-selected="true"], .search-list li:hover{background:var(--bg)}
.search-list li.empty{cursor:default;color:var(--muted)}

/* Uitklapblokken */
details.more{border-top:1px solid var(--line)}
details.more:last-of-type{border-bottom:1px solid var(--line)}
details.more > summary{cursor:pointer;list-style:none;padding-block:14px;font-weight:700;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translateY(-3px);flex:none;transition:transform .15s}
details.more[open] > summary::after{transform:rotate(-135deg) translateY(-1px)}
details.more > summary small{color:var(--muted);font-weight:400;font-size:.88rem;margin-left:auto;text-align:right}
.more-body{display:grid;gap:18px;padding-bottom:20px}
details.more p{margin:0 0 16px;color:var(--muted);max-width:65ch}
.more-body p{margin:0}

/* Rekentool */
.tool{display:grid;gap:32px;align-items:start;padding-bottom:48px}
@media (min-width:880px){ .tool{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px} }
.result{display:grid;gap:20px}
.result-label{font-weight:700;color:var(--muted);margin:0}
.result-label.is-example{display:inline-block;justify-self:start;background:var(--ink);color:var(--bg);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:3px}
.example-note{margin:-8px 0 0;font-size:.95rem;border-left:3px solid var(--plate);padding-left:12px}
.plate{display:flex;align-items:stretch;background:var(--plate);color:var(--plate-ink);border:3px solid #141412;border-radius:8px;overflow:hidden;box-shadow:0 0 0 2px var(--plate) inset}
.plate-eu{background:var(--eu);color:#FFFFFF;width:44px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:8px;font-weight:700;font-size:.95rem}
.plate-eu i{width:18px;height:18px;border:2px dotted #F5C400;border-radius:50%;margin-bottom:auto;margin-top:10px}
.plate-main{flex:1;padding:14px 18px 12px;display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap}
.plate-main .km{font-size:clamp(3.4rem, 9.5vw, 5rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.plate-main .unit{font-size:1.6rem;font-weight:700}
.compare{margin:0;font-size:1rem}
.compare b{font-variant-numeric:tabular-nums}

.road-wrap{padding-top:26px}
.road{position:relative;height:38px;border-radius:3px;background:repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 9px)}
.road-on{position:absolute;inset:0 auto 0 0;background:var(--asphalt);border-radius:3px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.road-on::after{content:"";position:absolute;left:10px;right:10px;top:50%;height:3px;margin-top:-1.5px;background:repeating-linear-gradient(90deg, #FFFFFF 0 18px, transparent 18px 34px)}
.road-end{position:absolute;top:-24px;bottom:-4px;border-left:2px solid var(--ink);transition:left .5s cubic-bezier(.2,.7,.2,1)}
.road-end span{position:absolute;bottom:100%;font-size:.75rem;font-weight:700;white-space:nowrap;transform:translate(-50%, 4px);background:var(--bg);padding:0 4px}
.posts{position:relative;height:26px;margin-top:6px}
.post{position:absolute;top:0;transform:translateX(-50%);background:#0B6B3A;color:#FFFFFF;font-size:.7rem;font-weight:700;padding:2px 4px 1px;border-radius:2px;font-variant-numeric:tabular-nums}
.post.wltp{background:transparent;color:var(--muted);transform:translateX(-100%);padding-right:0}

.facts{margin:0;display:grid}
.facts > div{display:flex;justify-content:space-between;gap:16px;padding-block:11px;border-top:1px solid var(--line)}
.facts > div:last-child{border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted)}
.facts dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.facts dd a{font-weight:400;font-size:.86rem;display:block}

.steps{list-style:none;margin:0;padding:0}
.steps li{display:flex;justify-content:space-between;gap:16px;padding-block:9px;border-top:1px solid var(--line)}
.steps li:first-child{border-top:0}
.steps li span:first-child small{display:block;color:var(--muted);font-size:.84rem}
.steps li span:last-child{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.neg{color:var(--loss)} .pos{color:var(--gain)}
.steps li.total{border-top:2px solid var(--ink);font-weight:700}
h3.sub{margin:6px 0 0;font-size:1rem}

.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.94rem}
th,td{padding:8px 6px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
th:first-child, td:first-child{text-align:left}
th{font-weight:700;color:var(--muted);font-size:.85rem}
td.best{font-weight:700;color:var(--gain)}

/* Routebord */
.sign{background:var(--sign);color:#FFFFFF;border-radius:8px;padding:20px 22px 16px;box-shadow:inset 0 0 0 5px var(--sign), inset 0 0 0 7px #FFFFFF;display:grid;gap:14px}
.sign h2{font-size:1.35rem}
.sign .sign-sub{margin:-8px 0 0;font-size:.92rem;opacity:.85}
.sign .label{color:#FFFFFF}
.sign select, .sign input[type="number"]{border-color:#FFFFFF}
.sign .row{grid-template-columns:repeat(auto-fit, minmax(130px, 1fr))}
.sign .seg{border-color:#FFFFFF}
.sign .seg label + label{border-left-color:#FFFFFF}
.sign .seg span{background:var(--sign);color:#FFFFFF}
.sign .seg input:checked + span{background:#FFFFFF;color:var(--sign)}
.verdict-box{border-top:1px solid rgba(255,255,255,.3);padding-top:14px;display:grid;gap:10px}
.verdict-line{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.verdict-line .trip{font-weight:700;font-size:1.2rem;line-height:1.2}
.verdict-line .trip small{display:block;font-weight:400;font-size:.86rem;opacity:.8;font-variant-numeric:tabular-nums}
.verdict{font-weight:700;font-size:1rem;padding:7px 12px;border-radius:4px;text-align:center;white-space:nowrap;line-height:1.2}
.verdict small{display:block;font-weight:400;font-size:.78rem}
.verdict.go{background:var(--plate);color:var(--plate-ink)}
.verdict.stop{border:2px solid #FFFFFF;color:#FFFFFF}
.legs{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.92rem}
.legs li{display:flex;justify-content:space-between;gap:12px}
.legs li span:last-child{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.legs li.charge{opacity:.8;font-size:.86rem}
.sign .sign-foot{margin:0;font-size:.78rem;opacity:.75}

/* Vergelijken */
.compare-sec{border-top:1px solid var(--line);padding-block:40px;display:grid;gap:20px}
.compare-sec h2{font-size:1.6rem}
.compare-grid{display:grid;gap:24px;align-items:start}
@media (min-width:880px){ .compare-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px} }
.cmp-table th:not(:first-child), .cmp-table td:not(:first-child){width:32%}
.cmp-table td{white-space:normal}

/* Knoppen */
.btn{display:inline-block;font:inherit;font-weight:700;text-decoration:none;border:2px solid var(--ink);background:var(--ink);color:var(--bg);border-radius:4px;padding:11px 16px;cursor:pointer}
.btn:hover{background:var(--surface);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--surface)}

/* Vragen */
.faq{border-top:1px solid var(--line);padding-block:44px 32px;display:grid;gap:16px}
.faq > *{max-width:720px}
.faq h2{font-size:1.6rem;margin-bottom:6px}

/* Tekstpagina's */
.article{padding-block:40px 56px;max-width:68ch}
.article h1{font-size:clamp(2.2rem, 5vw, 3.2rem);margin-bottom:10px}
.article .lead{font-size:1.1rem;color:var(--muted);margin:0 0 28px}
.article .updated{color:var(--muted);margin:0 0 28px}
.article section + section{margin-top:30px}
.article h2{font-size:1.3rem;margin-bottom:8px}
.article p{margin:0 0 12px}
.article ul, .article ol{margin:0 0 12px;padding-left:22px}
.article li{margin-bottom:6px}
.box{background:var(--surface);border:1.5px solid var(--ink);border-radius:4px;padding:18px 20px;margin-bottom:36px}
.box h2{font-size:1.05rem;margin-bottom:8px}
.box ul{margin:0;padding-left:20px;display:grid;gap:4px}
.checklist{list-style:none;padding-left:0 !important;counter-reset:c}
.checklist li{position:relative;padding-left:40px;margin-bottom:18px;counter-increment:c}
.checklist li::before{content:counter(c);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.checklist b{display:block}

/* Modelpagina's */
.crumbs{font-size:.88rem;color:var(--muted);padding-top:20px}
.crumbs a{color:var(--muted)}
.model-head{padding-block:18px 28px;display:grid;gap:18px}
.model-head h1{font-size:clamp(2rem, 5vw, 3.2rem)}
.model-head h1 small{display:block;font-size:.5em;color:var(--muted);font-weight:400;margin-top:6px;letter-spacing:0}
.model-grid{display:grid;gap:32px;padding-bottom:48px}
@media (min-width:880px){ .model-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:start} }
.model-grid section{display:grid;gap:12px}
.model-grid h2{font-size:1.3rem}
.model-grid p{margin:0;max-width:65ch}
.model-side{display:grid;gap:24px}
.plate.small{max-width:340px}
.plate.small .plate-main .km{font-size:3.2rem}
.link-list{list-style:none;margin:0;padding:0;columns:2 220px;column-gap:24px}
.link-list li{break-inside:avoid;padding-block:4px}
.brand-index h2{font-size:1.25rem;margin:28px 0 8px;border-bottom:1px solid var(--line);padding-bottom:6px}
.brand-index .link-list small{color:var(--muted);font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){ *{transition:none !important} }