/* Bandenmeter — ooinkbanden.nl. Wit, asfalt, signaalgeel. */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
:root {
  --asfalt: #16191d; --asfalt-2: #22272d; --tekst: #1d2126; --zacht: #545c66; --wit: #fff; --grijs: #f3f5f7; --lijn: #dde2e8;
  --geel: #f2c230; --geel-inkt: #6b5200; --rood: #b42318; --rood-bg: #fdecea; --groen: #18794e; --groen-bg: #e7f5ee;
  --font: "Archivo", system-ui, sans-serif; --mono: "Plex Mono", ui-monospace, monospace;
  --breed: 1180px; --smal: 760px; --gut: clamp(16px, 4vw, 32px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font: 400 1.0625rem/1.65 var(--font); color: var(--tekst); background: var(--wit); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tekst a, details a, .klein a { color: var(--tekst); text-decoration-color: var(--geel); text-decoration-thickness: 2px; }
h1, h2, h3 { font-stretch: 112%; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 .6em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 780; }
h2 { font-size: clamp(1.55rem, 2.6vw, 2.15rem); font-weight: 720; }
h3 { font-size: 1.15rem; font-weight: 680; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--breed); margin: 0 auto; padding: 0 var(--gut); }
.smal { max-width: calc(var(--smal) + 2 * var(--gut)); }
.midden { text-align: center; }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 12px; top: 12px; background: var(--geel); color: var(--asfalt); padding: 8px 12px; z-index: 10; }
:focus-visible { outline: 3px solid var(--geel); outline-offset: 2px; }

/* kop */
.top { background: var(--wit); border-bottom: 1px solid var(--lijn); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; flex-wrap: wrap; }
.merk { display: flex; align-items: center; gap: 10px; font-weight: 760; font-stretch: 112%; font-size: 1.15rem; text-decoration: none; }
.merk span { font-weight: 400; font-stretch: 100%; font-size: .85rem; color: var(--zacht); margin-left: 4px; }
@media (max-width: 1120px) { .merk span { display: none; } }
.merkteken { width: 30px; height: 30px; flex: none; }
.top nav { display: flex; gap: 6px; flex-wrap: wrap; }
.top nav a { text-decoration: none; padding: 6px 10px; border-radius: 6px; font-size: .95rem; }
.top nav a:hover { background: var(--grijs); }
.top nav a[aria-current] { background: var(--asfalt); color: var(--wit); }
@media (max-width: 640px) { .merk span { display: none; } .top-in { padding-top: 8px; padding-bottom: 8px; } }

/* hero */
.hero { background: var(--asfalt); color: var(--wit); padding: clamp(36px, 6vw, 72px) 0; }
.hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.kicker { font: 500 .78rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #c9ced5; }
.kicker a { color: var(--geel); text-decoration: none; }
.lead { font-size: 1.18rem; color: #e3e6ea; max-width: 34em; }
.byline { font: 400 .8rem var(--mono); color: #aab1b9; margin: 18px 0 0; }
.band-foto { margin: 0; } .band-foto img { border-radius: 10px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.knop { display: inline-block; background: var(--geel); color: var(--asfalt); font-weight: 680; text-decoration: none; padding: 12px 20px; border-radius: 8px; border: 0; font: inherit; font-weight: 680; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.knop:hover { background: #ffd34d; } .knop:active { transform: translateY(1px); }
@media (max-width: 860px) { .hero-in { grid-template-columns: 1fr; } }

/* kerncijfers */
.cijfers-band { border-bottom: 1px solid var(--lijn); }
.cijfers { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 32px; padding-bottom: 32px; margin: 0 auto; }
.cijfers strong { display: block; font: 500 clamp(1.9rem, 3.4vw, 2.6rem)/1.1 var(--mono); color: var(--asfalt); }
.cijfers strong::after { content: ""; display: block; width: 36px; height: 4px; background: var(--geel); margin: 10px 0 8px; }
.cijfers span { color: var(--zacht); font-size: .95rem; }
@media (max-width: 700px) { .cijfers { grid-template-columns: 1fr; gap: 18px; } }

/* secties */
.blok { padding: clamp(48px, 7vw, 88px) 0; }
.blok.grijs { background: var(--grijs); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split.omgekeerd > figure { order: -1; }
.tekst { max-width: 36em; }
figure { margin: 0; }
figcaption { font-size: .82rem; color: var(--zacht); margin-top: 12px; line-height: 1.5; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.omgekeerd > figure { order: 0; } }

/* seizoensgrafiek */
.grafiek { list-style: none; margin: 0; padding: 0 0 4px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 260px; border-bottom: 1px solid var(--tekst); }
.staaf { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.staaf::before { content: ""; width: 100%; height: var(--h); background: #c8ced6; border-radius: 3px 3px 0 0; }
.staaf.hoog::before { background: var(--asfalt); } .staaf.laag::before { background: var(--geel); }
.staaf .w { position: absolute; bottom: calc(var(--h) + 4px); font: 500 .62rem var(--mono); color: var(--tekst); white-space: nowrap; }
.staaf .m { position: absolute; top: 100%; margin-top: 6px; font: 400 .66rem var(--mono); color: var(--zacht); white-space: nowrap; transform: rotate(-45deg); transform-origin: top center; }
.grafiek-fig { padding-bottom: 34px; }
.grafiek-wrap { display: grid; grid-template-columns: auto 1fr; gap: 6px; }
.grafiek-as { height: 260px; display: flex; flex-direction: column; justify-content: space-between; font: 400 .62rem var(--mono); color: var(--zacht); text-align: right; transform: translateY(5px); }
.maandtabel { margin-top: 18px; }
.maandtabel summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.maandtabel .tabel { margin-top: 10px; font-size: .85rem; }
.apk-plaat { display: inline-block; font: 500 .95rem var(--mono); background: var(--geel); color: var(--asfalt); padding: 2px 10px; border-radius: 4px; margin: 0 0 6px; letter-spacing: .04em; }
.grafiek-fig figcaption { margin-top: 44px; }
@media (max-width: 520px) { .staaf .w { display: none; } .staaf.hoog .w, .staaf.laag .w { display: block; } }

/* tabel */
.tabel { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--wit); }
.tabel caption { text-align: left; font-weight: 680; padding: 0 0 10px; }
.tabel th, .tabel td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel thead th { font: 500 .75rem var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); }
.tabel td:nth-child(n+2) { font-family: var(--mono); white-space: nowrap; }
.tabel tbody th { font-family: var(--mono); color: var(--geel-inkt); width: 2.5em; }
.sticker-fig .tabel td { font-family: var(--font); white-space: normal; }

/* toolband */
.toolband { background: var(--asfalt); color: var(--wit); padding: clamp(48px, 7vw, 88px) 0; }
.toolband h2 { text-align: center; }
.toolband-intro { text-align: center; color: #d5d9de; max-width: 40em; margin: 0 auto 28px; }
.toolband .klein { color: #aab1b9; text-align: center; margin-top: 16px; }
.toolband .venster .klein { color: var(--zacht); text-align: left; margin-top: 8px; }
.venster { background: var(--wit); color: var(--tekst); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.venster-balk { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #eceff2; border-bottom: 1px solid var(--lijn); }
.venster-balk span { width: 10px; height: 10px; border-radius: 50%; background: #c3c9d0; }
.venster-balk b { margin-left: 10px; font: 500 .78rem var(--mono); color: var(--zacht); }
.venster-in { padding: 22px 22px 6px; margin: 0; }
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
input { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid #b9c1ca; border-radius: 7px; background: var(--wit); color: var(--tekst); }
input[aria-invalid="true"] { border-color: var(--rood); box-shadow: 0 0 0 2px var(--rood-bg); }
.fout { color: var(--rood); background: var(--rood-bg); padding: 8px 12px; border-radius: 6px; font-size: .92rem; }
.klein { font-size: .88rem; color: var(--zacht); }

/* kenteken */
.kenteken-rij { display: flex; gap: 10px; }
.kenteken { font: 600 1.35rem var(--mono); letter-spacing: .08em; text-transform: uppercase; background: #f6c400; border: 2px solid var(--asfalt); max-width: 260px; padding: 8px 12px 8px 42px;
  background-image: linear-gradient(90deg, #1f45a8 0 30px, transparent 30px); }
.kenteken::placeholder { color: #6b5a00; }
.apk-uit { padding: 6px 22px 22px; }
.apk-auto { font-weight: 720; font-stretch: 112%; font-size: 1.2rem; margin: 0; }
.apk-samen { font-weight: 600; margin: 14px 0 10px; }
.tijdlijn { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--lijn); }
.tijdlijn li { position: relative; padding: 6px 0 12px 18px; display: flex; flex-direction: column; gap: 4px; }
.tijdlijn li::before { content: ""; position: absolute; left: -7px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--groen); }
.tijdlijn li.met::before { background: var(--rood); }
.tijdlijn .dag { font: 500 .85rem var(--mono); color: var(--zacht); }
.tijdlijn .gebrek { color: var(--rood); font-weight: 600; } .tijdlijn .geen { color: var(--groen); }
.laden, .leeg { color: var(--zacht); }
@media (max-width: 480px) { .kenteken-rij { flex-direction: column; } .kenteken { max-width: none; } }

/* rekenhulp spanning */
.velden.vier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.velden input:disabled { opacity: .5; }
.toolband .hint, .toolband .vinkje { margin: 8px 0 0; font-size: .92rem; color: var(--zacht); }
.toolband .vinkje { display: flex; gap: 8px; align-items: center; color: inherit; }
.toolband .vinkje input { width: 18px; height: 18px; margin: 0; }
.meter-as { margin: 4px 0 0; text-align: center; font-size: .9rem; color: var(--zacht); }
.velden p { margin: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.wielen { border: 0; padding: 0; margin: 18px 0 8px; }
.wielen legend { font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.auto-schets { display: grid; grid-template-columns: 1fr 80px 1fr; grid-template-rows: auto auto; gap: 12px 14px; position: relative; }
.auto-schets::before { content: ""; grid-column: 2; grid-row: 1 / 3; border: 2px solid var(--lijn); border-radius: 26px 26px 14px 14px; }
.auto-schets p { margin: 0; } .lv { grid-column: 1; grid-row: 1; } .rv { grid-column: 3; grid-row: 1; } .la { grid-column: 1; grid-row: 2; } .ra { grid-column: 3; grid-row: 2; }
.spanning-uit { display: grid; grid-template-columns: 220px 1fr; gap: 22px; padding: 14px 22px 22px; border-top: 1px solid var(--lijn); align-items: start; }
.spanning-uit[hidden] { display: none; }
.meter svg { width: 100%; height: auto; }
.meter-boog { fill: none; stroke: #e3e7eb; stroke-width: 14; stroke-linecap: round; }
.meter-doel { fill: none; stroke: var(--geel); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .35s cubic-bezier(.2,.8,.2,1); }
.naald { transform-origin: 100px 110px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.naald path { stroke: var(--asfalt); stroke-width: 4; stroke-linecap: round; } .naald circle { fill: var(--asfalt); }
.meter-getal { text-align: center; margin: -6px 0 0; font: 400 .95rem var(--mono); }
.meter-getal strong { font-size: 2rem; font-weight: 500; }
.uit-kop { font-weight: 650; font-size: 1.05rem; }
.wiel-lijst { list-style: none; margin: 0 0 10px; padding: 0; }
.wiel-lijst li { display: grid; grid-template-columns: 7.5em 1fr auto; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--lijn); font-size: .94rem; }
.wiel-lijst .getal { font-family: var(--mono); color: var(--zacht); }
.wiel-lijst .ok .oordeel { color: var(--groen); font-weight: 600; } .wiel-lijst .laag .oordeel { color: var(--rood); font-weight: 600; }
.as { margin: 6px 0; padding: 8px 12px; border-radius: 6px; background: var(--groen-bg); color: #0f5132; font-size: .94rem; }
.as.fout-as { background: var(--rood-bg); color: var(--rood); }
@media (max-width: 900px) { .velden.vier { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .spanning-uit { grid-template-columns: 1fr; } .meter { max-width: 240px; margin: 0 auto; } .auto-schets { grid-template-columns: 1fr 34px 1fr; } .wiel-lijst li { grid-template-columns: 1fr; gap: 2px; } }

/* thermometer-figuur */
.thermo { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.thermo li { display: grid; grid-template-columns: 4em 1fr 5.5em; align-items: center; gap: 12px; font-family: var(--mono); }
.thermo .balk { height: 22px; border-radius: 4px; background: linear-gradient(90deg, var(--asfalt) var(--b), transparent var(--b)); }
.thermo li:last-child .balk { background: linear-gradient(90deg, #3b6fb6 var(--b), transparent var(--b)); }
.thermo .p { text-align: right; font-weight: 500; }

/* as-schema */
.as-schema { display: grid; grid-template-columns: auto 1fr auto; gap: 26px 14px; align-items: center; max-width: 420px; margin: 0 auto; }
.wiel { display: grid; place-items: center; width: 64px; height: 92px; border-radius: 12px; background: var(--asfalt); color: var(--wit); font: 500 1.05rem var(--mono); }
.wiel.laag { background: var(--rood); }
.as-lijn { position: relative; text-align: center; font-size: .85rem; color: var(--groen); padding-top: 18px; }
.as-lijn::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 3px; background: currentColor; }
.as-lijn b { display: block; font: 500 1rem var(--mono); }
.as-lijn.fout { color: var(--rood); }

/* stappen */
.stappen { list-style: none; counter-reset: s; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 44px); }
.stappen li { counter-increment: s; }
.stappen li::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--geel); color: var(--asfalt); font: 500 1.1rem var(--mono); margin-bottom: 14px; }
@media (max-width: 760px) { .stappen { grid-template-columns: 1fr; } }

/* faq */
details { border-bottom: 1px solid var(--lijn); padding: 4px 0; }
summary { cursor: pointer; font-weight: 650; padding: 12px 28px 12px 0; position: relative; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 8px; font: 400 1.4rem var(--mono); transition: transform .2s ease; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--tekst); }

/* cta */
.cta { background: var(--asfalt-2); color: var(--wit); text-align: center; padding: 56px 0; }
.cta p:first-child { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 600; font-stretch: 108%; }

/* loadindex */
.velden.twee { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: end; }
.velden.twee p { margin: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.toolband .actie { margin: 14px 0 0; }
.toolband .actie input[type="submit"] { width: auto; }
.li-uit { padding: 14px 22px 22px; border-top: 1px solid var(--lijn); }
.li-uit[hidden] { display: none; }
.code-delen { display: grid; grid-template-columns: repeat(6, 1fr); margin: 0; }
.code-delen .d { display: grid; grid-template-rows: auto auto; gap: 2px; padding: 10px 12px 8px; border-left: 1px solid var(--lijn); }
.code-delen .d:first-child { border-left: 0; padding-left: 0; }
.code-delen .d b { font: 500 1.25rem var(--mono); color: var(--asfalt); }
.code-delen .d i { font-style: normal; font-size: .78rem; color: var(--zacht); line-height: 1.35; }
.code-delen .d.geel b { color: var(--geel-inkt); }
.code-delen.klein { margin-top: 4px; }
.code-delen.klein .d b { font-size: 1.02rem; }
.code-fig .code-delen { border-bottom: 1px solid var(--lijn); padding-bottom: 12px; }
.code-fig p, .li-uit p { margin: 10px 0 0; }
.as-kop { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; font-weight: 720; font-stretch: 112%; font-size: 1.12rem; }
.as-lijst { list-style: none; margin: 6px 0 0; padding: 0; }
.as-lijst li { display: grid; grid-template-columns: 3.5em 1fr; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--lijn); font-size: .94rem; }
.as-lijst .as-naam { font-weight: 650; }
.as-lijst .as-getal { font-family: var(--mono); color: var(--zacht); }
.as-lijst .as-oordeel { grid-column: 1 / -1; }
.as-lijst .as-oordeel.ok { color: var(--groen); font-weight: 600; }
.as-lijst .as-oordeel.niet { color: var(--rood); font-weight: 600; }
.snelheid-fig { max-width: 340px; }
@media (max-width: 900px) { .velden.twee { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .code-delen { grid-template-columns: repeat(3, 1fr); } .code-delen .d:nth-child(4) { border-left: 0; padding-left: 0; } .code-delen .d { border-top: 1px solid var(--lijn); } .code-delen .d:nth-child(-n+3) { border-top: 0; } .code-delen .d b { font-size: 1.05rem; } .as-lijst li { grid-template-columns: 1fr; } }

/* voet */
.voet { background: var(--asfalt); color: #c9ced5; padding: 48px 0 40px; font-size: .92rem; }
.voet-in { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 32px; }
.voet a { color: var(--geel); }
.voet-logo { display: flex; align-items: center; gap: 10px; color: var(--wit); font-weight: 720; font-stretch: 112%; font-size: 1.1rem; }
.voet-kop { color: var(--wit); font-weight: 650; }
.voet-nav a { display: block; padding: 3px 0; text-decoration: none; }
@media (max-width: 800px) { .voet-in { grid-template-columns: 1fr; } }

/* profieldiepte */
.meetzone { display: grid; grid-template-columns: 56px 1fr 56px; height: 92px; border-radius: 14px; overflow: hidden; border: 1px solid var(--lijn); }
.meetzone .mz-zij { background: var(--asfalt); color: #c9ced5; display: grid; place-items: center; font: 500 .78rem var(--mono); }
.meetzone .mz-midden { position: relative; background: #3a4149; color: var(--wit); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; text-align: center; padding: 0 8px; }
.meetzone .mz-midden::before { content: ""; position: absolute; inset: 12px 0; background: repeating-linear-gradient(90deg, transparent 0 30px, #565f68 30px 34px); }
.meetzone .mz-midden b { position: relative; font: 500 .95rem var(--mono); color: var(--geel); }
.meetzone .mz-midden i { position: relative; font: 400 .78rem var(--mono); color: #d5d9de; }
.meetzone-labels { display: grid; grid-template-columns: 56px 1fr 56px; font: 400 .74rem var(--mono); color: var(--zacht); margin-top: 6px; }
.meetzone-labels span:nth-child(2) { text-align: center; }
.vergelijking { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.vergelijking li { display: grid; gap: 6px; }
.vergelijking .vg-kop { display: flex; justify-content: space-between; gap: 12px; font-size: .94rem; }
.vergelijking .vg-kop b { font-family: var(--mono); font-weight: 500; }
.vergelijking .vg-balk { height: 26px; border-radius: 5px; background: #c8ced6; }
.vergelijking .nieuw .vg-balk { background: var(--asfalt); }
.vergeleken .slijt .vg-balk { background: var(--rood); }
.vergelijking .voet { font-size: .88rem; color: var(--zacht); }
.seizoen-kies { display: flex; gap: 8px; flex-wrap: wrap; }
.seizoen-kies label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; margin: 0; border: 1px solid #b9c1ca; border-radius: 7px; padding: 8px 12px; cursor: pointer; }
.seizoen-kies input { width: 16px; height: 16px; }
.seizoen-kies label:has(input:checked) { border-color: var(--asfalt); background: var(--grijs); }
.grenstabel td, .grenstabel th { font-family: var(--font); }
@media (max-width: 700px) { .meetzone { grid-template-columns: 34px 1fr 34px; height: 80px; } .meetzone-labels { grid-template-columns: 34px 1fr 34px; } }
.tabel-scroll { overflow-x: auto; }
.tabel-scroll .tabel { min-width: 470px; }
@media (max-width: 700px) { .meetzone-labels span:first-child, .meetzone-labels span:last-child { display: none; } .meetzone .mz-zij { font-size: .62rem; } }
#profiel-uit { grid-template-columns: 1fr; }
.grafiek-fig { min-width: 0; }
.maandtabel { min-width: 0; }
.tabel-scroll { max-width: 100%; }

/* winterbanden-duitsland */
.w-fig { min-width: 0; }
.w-tijdlijn { list-style: none; margin: 0; padding: 0; }
.w-tijdlijn li { position: relative; padding: 0 0 18px 26px; }
.w-tijdlijn li::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--geel); box-shadow: 0 0 0 3px var(--asfalt); }
.w-tijdlijn li::after { content: ""; position: absolute; left: 5px; top: 21px; bottom: -2px; width: 2px; background: var(--lijn); }
.w-tijdlijn li:last-child::after { display: none; }
.w-tijdlijn b { display: block; font: 500 1.05rem var(--mono); margin-bottom: 2px; }
.w-tijdlijn span { font-size: .93rem; color: var(--tekst); }
.w-vergelijking td.ja { color: var(--groen); font-weight: 650; }
.w-vergelijking td.nee { color: var(--rood); font-weight: 650; }
.w-vergelijking td.neutraal { color: var(--zacht); }
.w-vergelijking td { font-family: var(--font); }
.w-vergelijking tbody th { font-family: var(--font); color: var(--tekst); white-space: normal; width: auto; }
.w-dot-reeks { font: 500 1.45rem var(--mono); letter-spacing: .05em; margin: 0 0 12px; }
.w-dot-reeks b { background: var(--geel); color: var(--asfalt); padding: 1px 7px; border-radius: 4px; }
.w-symbolen { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.w-symbool { text-align: center; }
.w-symbool svg { width: 108px; height: 108px; margin: 0 auto; color: var(--asfalt); }
.w-symbool p { font-size: .85rem; color: var(--zacht); margin: 10px 0 0; line-height: 1.45; }
.w-ms { display: grid; place-items: center; width: 108px; height: 108px; margin: 0 auto; border: 4px solid var(--asfalt); border-radius: 50%; font: 500 1.7rem var(--mono); color: var(--asfalt); }
.w-dot-uit { font: 400 .92rem var(--mono); color: var(--zacht); margin: 0 0 12px; line-height: 1.55; }
.w-landen li { grid-template-columns: 9em 10.5em 1fr; align-items: start; }
.w-landen .as-oordeel { grid-column: auto; }
.w-landen .as-oordeel-tekst { font-size: .93rem; }
.as-oordeel.neutraal { color: var(--zacht); }
#winter-uit { grid-template-columns: 1fr; }
@media (max-width: 700px) { .w-landen li { grid-template-columns: 1fr auto; gap: 2px 10px; } .w-landen .as-oordeel-tekst { grid-column: 1 / -1; } .w-symbolen { gap: 12px; } }
/* bandenspanning-lampje */
.bsl-fig { min-width: 0; margin: 0; }
.bsl-lampen { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.bsl-lampen li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--lijn); }
.bsl-lampen li:last-child { border-bottom: 0; padding-bottom: 0; }
.lamp { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--lijn); background: transparent; align-self: center; }
.lamp.kort { border-color: #d99a00; background: #f2c230; opacity: .35; }
.lamp.brandt { border-color: #d99a00; background: #f2c230; box-shadow: 0 0 14px #f2c23088; }
.lamp.flits { border-color: #d99a00; background: #f2c230; animation: bsl-flits 1.2s steps(1, end) infinite; }
@keyframes bsl-flits { 0%, 55% { opacity: 1; box-shadow: 0 0 14px #f2c23088; } 56%, 100% { opacity: .15; box-shadow: none; } }
.bsl-lampen b { font-size: .98rem; }
.bsl-lampen i { font-style: normal; color: var(--zacht); font-size: .88rem; line-height: 1.45; }
.bsl-tijdlijn { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bsl-tijdlijn li { position: relative; padding: 0 0 14px 22px; border-left: 2px solid var(--lijn); }
.bsl-tijdlijn li:last-child { border-left-color: transparent; padding-bottom: 0; }
.bsl-tijdlijn li::before { content: ""; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--geel); border: 2px solid var(--asfalt); }
.bsl-tijdlijn b { display: block; font: 500 .92rem var(--mono); }
.bsl-tijdlijn span { color: var(--zacht); font-size: .92rem; line-height: 1.5; }
.bsl-grafiek-wrap { display: grid; grid-template-columns: auto 1fr; gap: 6px; }
.bsl-grafiek-wrap .grafiek-as { height: 200px; }
.bsl-grafiek { list-style: none; margin: 0; padding: 0 0 4px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 200px; border-bottom: 1px solid var(--tekst); }
.bsl-grafiek li { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.bsl-grafiek li.hoog .bsl-staaf { outline: 2px solid var(--tekst); outline-offset: 2px; }
.bsl-staaf { position: relative; display: block; width: 100%; height: var(--h); min-height: 3px; background: var(--geel); border-radius: 3px 3px 0 0; }
.bsl-staaf i { position: absolute; left: 0; right: 0; bottom: 0; height: min(var(--a), 100%); background: var(--asfalt); border-radius: 3px 3px 0 0; }
.bsl-grafiek .w { margin-bottom: 4px; font: 500 .6rem var(--mono); color: var(--tekst); white-space: nowrap; }
.bsl-grafiek .m { position: absolute; top: 100%; margin-top: 6px; font: 400 .62rem var(--mono); color: var(--zacht); white-space: nowrap; transform: rotate(-45deg); transform-origin: top center; }
.bsl-legenda { display: flex; align-items: center; gap: 8px; font: 400 .72rem var(--mono); color: var(--zacht); margin: 40px 0 0; }
.bsl-legenda .d { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 10px; }
.bsl-legenda .d:first-child { margin-left: 0; }
.bsl-legenda .ra4 { background: var(--asfalt); } .bsl-legenda .c212 { background: var(--geel); }
.bsl-bouwjaar { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bsl-bouwjaar li { display: grid; grid-template-columns: 5.2em 1fr 4.2em; gap: 10px; align-items: center; }
.bsl-bouwjaar .j { font: 400 .78rem var(--mono); color: var(--zacht); text-align: right; }
.bsl-bouwjaar .balk { display: flex; height: 18px; border-radius: 3px; overflow: hidden; min-width: 0; width: var(--w, 100%); }
.bsl-bouwjaar .balk i { display: block; height: 100%; }
.bsl-bouwjaar .balk .ra4 { width: var(--b); background: var(--asfalt); }
.bsl-bouwjaar .balk .c212 { width: calc(100% - var(--b)); background: var(--geel); }
.bsl-bouwjaar .n { font: 500 .82rem var(--mono); white-space: nowrap; }
.bsl-uit { padding: 14px 22px 22px; border-top: 1px solid var(--lijn); }
.bsl-uit[hidden] { display: none; }
.bsl-kop { display: grid; gap: 2px; }
.bsl-auto { font-weight: 720; font-stretch: 112%; font-size: 1.12rem; }
.bsl-eis { display: grid; grid-template-columns: 3.2em 1fr; gap: 4px 12px; margin: 14px 0 0; padding: 12px 14px; border-radius: 6px; }
.bsl-eis.wel { background: var(--groen-bg); color: #0f5132; }
.bsl-eis.niet { background: var(--grijs); color: var(--tekst); }
.bsl-oordeel { font: 500 1.4rem/1 var(--mono); }
.bsl-eis.niet .bsl-oordeel { color: var(--rood); }
.bsl-eis p { margin: 0; font-size: .95rem; line-height: 1.5; }
.bsl-samen { margin: 14px 0 0; font-weight: 650; }
.bsl-lijst { list-style: none; margin: 6px 0 0; padding: 0; }
.bsl-lijst li { display: grid; grid-template-columns: 10.5em 1fr; gap: 2px 12px; padding: 7px 0; border-bottom: 1px solid var(--lijn); font-size: .94rem; }
.bsl-lijst .dag { font: 400 .88rem var(--mono); color: var(--zacht); }
.bsl-lijst .gebrek { color: var(--tekst); }
@media (max-width: 700px) { .bsl-grafiek-wrap { grid-template-columns: 1fr; } .bsl-grafiek-wrap .grafiek-as { display: none; } .bsl-grafiek .w { font-size: .52rem; } .bsl-bouwjaar li { grid-template-columns: 4.2em 1fr 3.6em; gap: 8px; } .bsl-bouwjaar .n { font-size: .68rem; } .bsl-lijst li { grid-template-columns: 1fr; } .bsl-eis { grid-template-columns: 1fr; } }
.tabel.bsl-vergelijk td { font-family: var(--font); white-space: normal; }
.bsl-bouwjaar-fig { max-width: 780px; margin: 30px auto 0; }
.bsl-bouwjaar-tekst { margin-top: 26px; }

/* runflat-banden */
.rf-fig { min-width: 0; }
.rf-codes td:first-child, .rf-grenzen td:first-child { font-family: var(--font); white-space: normal; font-weight: 600; }
.rf-codes td:nth-child(2), .rf-codes td:nth-child(3), .rf-grenzen td:nth-child(4) { font-family: var(--font); white-space: normal; }
.rf-codes tbody td:first-child { font-family: var(--mono); font-weight: 500; color: var(--geel-inkt); }
.rf-cites tbody td:nth-child(3) { color: var(--zacht); font-size: .9rem; }
.rf-citaat { border-left: 4px solid var(--geel); padding: 4px 0 4px 18px; }
.rf-citaat blockquote { margin: 0; }
.rf-citaat blockquote p { font-style: italic; margin: 0 0 10px; }
.rf-citaat .vn { font: 400 .8rem var(--mono); color: var(--zacht); margin: 0 0 12px; }
.rf-citaat p:last-child { margin: 0; font-size: .95rem; }
.rf-uit { padding: 14px 22px 22px; border-top: 1px solid var(--lijn); }
.rf-uit[hidden] { display: none; }
.rf-oordeel { font: 500 1.3rem/1.2 var(--mono); margin: 0; }
.rf-oordeel.ja { color: var(--groen); }
.rf-oordeel.nee { color: var(--tekst); }
.rf-hit { margin: 14px 0 0; font-size: .98rem; }
.rf-hit b { font: 500 .95rem var(--mono); background: var(--geel); color: var(--asfalt); padding: 1px 7px; border-radius: 4px; }
.rf-hit.rf-oe b { background: var(--grijs); color: var(--tekst); }
.rf-bron { display: block; font: 400 .78rem var(--mono); color: var(--zacht); margin: 4px 0 0; }
.rf-miss { margin: 14px 0 0; font-size: .93rem; color: var(--zacht); }
.rf-maatkop { margin: 18px 0 0; font-weight: 600; font-size: .9rem; }
#rf-maat .code-delen { margin-top: 8px; }
.rf-maatfout { color: var(--zacht); margin: 18px 0 0; }
.rf-tpms { margin: 16px 0 0; padding: 12px 14px; border-radius: 6px; background: var(--grijs); font-size: .93rem; }
.rf-tpms p { margin: 0; }
/* band-repareren */
.rp-veld { border: 0; padding: 0; margin: 16px 0 4px; }
.rp-veld legend { font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.rp-veld select { font: inherit; width: 100%; max-width: 320px; padding: 10px 12px; border: 1px solid #b9c1ca; border-radius: 7px; background: var(--wit); color: var(--tekst); }
.band-zones { display: grid; grid-template-columns: 1.1fr 0.9fr minmax(0, 2.4fr) 0.9fr 1.1fr; min-height: 96px; border-radius: 14px; overflow: hidden; border: 1px solid var(--lijn); }
.band-zones .bz { display: grid; place-items: center; align-content: center; text-align: center; font: 500 .82rem/1.5 var(--mono); padding: 8px 4px; }
.band-zones .bz i { font-style: normal; font-weight: 400; font-size: .72rem; }
.band-zones .wang { background: var(--asfalt); color: #f3b9b3; }
.band-zones .schouder { background: var(--rood); color: #fff; }
.band-zones .loopvlak { background: var(--groen); color: #fff; }
.rp-uit { padding: 14px 22px 22px; border-top: 1px solid var(--lijn); }
.rp-uit[hidden] { display: none; }
.uit-kop.rp-goed { color: var(--groen); }
.uit-kop.rp-midden { color: var(--geel-inkt); }
.uit-kop.rp-slecht { color: var(--rood); }
.rp-redenen { list-style: none; margin: 0 0 12px; padding: 0; }
.rp-redenen li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--lijn); font-size: .95rem; }
.rp-redenen li i.rp-bron { grid-column: 1; grid-row: 1 / 3; align-self: start; font: 500 .68rem/1 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .04em; background: var(--grijs); color: var(--zacht); padding: 4px 7px; border-radius: 4px; white-space: nowrap; }
.rp-redenen li i.rp-bron:empty { display: none; }
.rp-redenen small { grid-column: 2; color: var(--zacht); font-size: .82rem; line-height: 1.5; }
@media (max-width: 700px) { .rp-redenen li { grid-template-columns: 1fr; } .rp-redenen small { grid-column: 1; } }
.rp-mee { color: var(--groen); font-weight: 600; }
.rp-notities { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rp-notities li { position: relative; padding-left: 18px; font-size: .93rem; color: var(--tekst); }
.rp-notities li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--geel); }
.rp-fig .vergelijking li.neutraal .vg-balk { background: #c8ced6; }
.rp-fig .vergelijking .nieuw .vg-balk { background: var(--groen); }
.rp-fig .vergelijking .slijt .vg-balk { background: var(--rood); }
.rp-eerdere { margin: 16px 0 4px; }
.rp-eerdere label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.rp-eerdere select { font: inherit; width: 100%; max-width: 320px; padding: 10px 12px; border: 1px solid #b9c1ca; border-radius: 7px; background: var(--wit); color: var(--tekst); }
@media (max-width: 700px) {
  .band-zones { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .band-zones .bz { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: left; padding: 9px 14px; }
  .band-zones .bz br { display: none; }
  .band-zones .loopvlak { padding: 18px 14px; }
}

/* blog */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.blog-kop { padding: clamp(40px, 6vw, 72px) 0 clamp(8px, 2vw, 16px); border-bottom: 1px solid var(--lijn); }
.blog-kop .kicker { color: var(--zacht); } .blog-kop .kicker a { color: var(--geel-inkt); }
.blog-kop .lead { color: var(--zacht); max-width: 38em; }
.blog-archief { padding-top: clamp(24px, 4vw, 40px); }
.blog-lijst { list-style: none; margin: 0; padding: 0; }
.blog-item { border-bottom: 1px solid var(--lijn); }
.blog-item:first-child { border-top: 1px solid var(--lijn); }
.blog-item a { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: center; padding: 22px 0; text-decoration: none; }
.blog-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
.blog-item h2, .blog-item h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); margin: 6px 0 8px; transition: color .15s ease; }
.blog-item a:hover h2, .blog-item a:hover h3 { text-decoration: underline; text-decoration-color: var(--geel); text-decoration-thickness: 3px; }
.blog-item-meta { font: 500 .74rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--zacht); }
.blog-item-lead { display: block; color: var(--zacht); max-width: 42em; }
.blok.grijs .blog-item a { grid-template-columns: 160px minmax(0, 1fr); }
@media (max-width: 600px) { .blog-item a, .blok.grijs .blog-item a { grid-template-columns: 96px minmax(0, 1fr); align-items: start; padding: 16px 0; } .blog-item-lead { display: none; } .blog-item h2, .blog-item h3 { font-size: 1.05rem; } }
.artikel { padding: clamp(36px, 6vw, 64px) 0 clamp(48px, 7vw, 80px); }
.artikel-tekst { font-size: 1.09rem; }
.artikel-tekst > h2 { margin-top: 1.8em; }
.artikel-tekst > h3 { margin-top: 1.4em; }
.artikel-tekst a { text-decoration-color: var(--geel); text-decoration-thickness: 2px; }
.artikel-tekst ul, .artikel-tekst ol { padding-left: 1.2em; margin: 0 0 1.2em; } .artikel-tekst li { margin-bottom: .4em; }
.artikel-tekst figure { margin: 2em 0; }
.artikel-tekst .breed { margin-left: calc(-1 * min(120px, (100vw - var(--smal)) / 2 - var(--gut))); margin-right: calc(-1 * min(120px, (100vw - var(--smal)) / 2 - var(--gut))); }
@media (max-width: 1040px) { .artikel-tekst .breed { margin-left: 0; margin-right: 0; } }
.artikel-tekst .tabel-scroll { overflow-x: auto; }
.artikel-tekst .tabel td { white-space: normal; }
.artikel-tekst .tabel tbody th { width: auto; min-width: 6.5em; }
.artikel-tekst .kern { border-left: 4px solid var(--geel); padding: 4px 0 4px 18px; margin: 1.6em 0; font-size: 1.15rem; font-weight: 560; }
.artikel-tools { margin-top: 2.6em; border-top: 2px solid var(--asfalt); padding-top: 18px; }
.artikel-tools h2, .artikel-bronnen h2 { font-size: 1.15rem; margin: 0 0 10px; }
.artikel-tools ul { list-style: none; padding: 0; margin: 0; }
.artikel-tools li { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px 20px; padding: 10px 0; border-bottom: 1px solid var(--lijn); margin: 0; }
.artikel-tools li a { font-weight: 640; }
.artikel-tools li span { color: var(--zacht); font-size: .95rem; }
@media (max-width: 600px) { .artikel-tools li { grid-template-columns: minmax(0, 1fr); } }
.artikel-bronnen { margin-top: 2em; font-size: .92rem; color: var(--zacht); }
.artikel-bronnen ul { padding-left: 1.1em; }
.artikel-bronnen a { color: var(--zacht); overflow-wrap: anywhere; }

/* blog-winterbanden-wanneer-wisselen */
.bww-fig { margin: 2em 0; min-width: 0; }
.bww-bereik { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bww-bereik li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) 8.6em; gap: 10px; align-items: center; min-width: 0; }
.bww-bereik b { font: 500 .8rem var(--mono); color: var(--zacht); }
.bww-bereik em { font: 400 .78rem var(--mono); color: var(--tekst); white-space: nowrap; justify-self: end; font-style: normal; }
.bww-bereik .r { position: relative; height: 14px; min-width: 0; }
.bww-bereik .r::before { content: ""; position: absolute; inset: 6px 0; background: var(--lijn); border-radius: 2px; }
.bww-bereik .r i { position: absolute; left: var(--l); width: var(--b); top: 0; bottom: 0; background: var(--asfalt); border-radius: 3px; }
.bww-as { position: relative; height: 1.2em; margin: 10px calc(8.6em + 10px) 0 calc(4.6em + 10px); }
.bww-as span { position: absolute; left: var(--p); transform: translateX(-50%); font: 400 .66rem var(--mono); color: var(--zacht); white-space: nowrap; }
@media (max-width: 560px) {
  .bww-bereik li { grid-template-columns: 4.2em minmax(0, 1fr); row-gap: 3px; }
  .bww-bereik em { grid-column: 2; justify-self: start; }
  .bww-bereik li .r { grid-row: 1; }
  .bww-as { margin-right: 0; margin-left: calc(4.2em + 10px); }
}
.bww-fig2 { margin: 2em 0; min-width: 0; }
.bww-staven { display: grid; gap: 10px; }
.bww-staaf-rij { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0; }
.bww-staaf-rij > b { font: 500 .8rem var(--mono); color: var(--tekst); }
.bww-staaf { position: relative; height: 16px; background: var(--lijn); border-radius: 0 3px 3px 0; min-width: 0; }
.bww-staaf i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--asfalt); border-radius: 0 3px 3px 0; }
.bww-staaf span { position: absolute; left: calc(var(--w) + 6px); top: 50%; transform: translateY(-50%); font: 500 .7rem var(--mono); color: var(--tekst); white-space: nowrap; }
.bww-as2 { position: relative; height: 1.2em; margin: 8px 0 0 calc(6.4em + 10px); }
.bww-as2 span { position: absolute; left: var(--p); font: 400 .66rem var(--mono); color: var(--zacht); white-space: nowrap; }
@media (max-width: 560px) { .bww-staaf-rij { grid-template-columns: 4.8em minmax(0, 1fr); } .bww-as2 { margin-left: calc(4.8em + 10px); } .bww-as2 span:first-child { left: 0; transform: none; } .bww-as2 span:last-child { left: auto; right: 0; } }
.bww-venster { margin: 2em 0; }
.bww-venster select { font: inherit; width: 100%; max-width: 320px; padding: 10px 12px; border: 1px solid #b9c1ca; border-radius: 7px; background: var(--wit); color: var(--tekst); }
.bww-venster select[aria-invalid="true"] { border-color: var(--rood); box-shadow: 0 0 0 2px var(--rood-bg); }
.bww-uit { padding: 4px 22px 22px; border-top: 1px solid var(--lijn); }
.bww-uit[hidden] { display: none; }
.bww-uit-kop { margin: 14px 0 6px; }
.bww-uit-kop b { font: 600 1.15rem var(--mono); }
.bww-uit-kop span { display: block; font: 400 .78rem var(--mono); color: var(--zacht); }
.bww-uit-rijen { list-style: none; margin: 0; padding: 0; }
.bww-uit-rijen li { display: grid; grid-template-columns: 11.5em minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--lijn); font-size: .94rem; align-items: baseline; }
.bww-uit-rijen li:last-child { border-bottom: 0; }
.bww-uit-rijen b { font: 500 .82rem var(--mono); color: var(--zacht); white-space: nowrap; }
.bww-uit-rijen span { color: var(--tekst); min-width: 0; }
.bww-uit-bron { font: 400 .78rem var(--mono); color: var(--zacht); margin: 10px 0 0; }
@media (max-width: 480px) { .bww-uit-rijen li { grid-template-columns: minmax(0, 1fr); row-gap: 1px; } .bww-uit-rijen b { white-space: normal; } }

/* blog-all-season-of-winterbanden */
.bas-fig { margin: 2em 0; min-width: 0; }
.bas-rijen { display: grid; gap: 12px; }
.bas-rij { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0; }
.bas-rij > b { font: 500 .82rem var(--mono); color: var(--tekst); }
.bas-balken { display: grid; gap: 3px; min-width: 0; }
.bas-balk { position: relative; height: 15px; background: var(--lijn); border-radius: 0 3px 3px 0; min-width: 0; }
.bas-balk i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--asfalt); border-radius: 0 3px 3px 0; }
.bas-balk.vorst i { background: var(--geel); }
.bas-balk span { position: absolute; left: calc(var(--w) + 6px); top: 50%; transform: translateY(-50%); font: 500 .68rem var(--mono); color: var(--tekst); white-space: nowrap; }
.bas-legenda { display: flex; gap: 18px; margin: 10px 0 0 calc(6.4em + 10px); font: 400 .72rem var(--mono); color: var(--zacht); }
.bas-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; background: var(--asfalt); }
.bas-legenda i.v { background: var(--geel); }
@media (max-width: 560px) { .bas-legenda { margin-left: 0; } .bas-rij { grid-template-columns: 5em minmax(0, 1fr); } }
/* blog teksttabellen */
.artikel-tekst .tabel.tekst td, .artikel-tekst .tabel.kv td { font-family: var(--font); }
@media (max-width: 640px) {
  .artikel-tekst .tabel-scroll .tabel.tekst, .artikel-tekst .tabel-scroll .tabel.kv { min-width: 0; }
  .artikel-tekst .tabel.tekst thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .artikel-tekst .tabel.tekst tr, .artikel-tekst .tabel.tekst th, .artikel-tekst .tabel.tekst td,
  .artikel-tekst .tabel.kv tr, .artikel-tekst .tabel.kv th, .artikel-tekst .tabel.kv td { display: block; width: auto; }
  .artikel-tekst .tabel.tekst tr, .artikel-tekst .tabel.kv tr { border-bottom: 1px solid var(--lijn); padding: 10px 0; }
  .artikel-tekst .tabel.tekst th, .artikel-tekst .tabel.tekst td, .artikel-tekst .tabel.kv th, .artikel-tekst .tabel.kv td { border: 0; padding: 3px 0; }
  .artikel-tekst .tabel.tekst th[data-label]::before, .artikel-tekst .tabel.tekst td[data-label]::before { content: attr(data-label); display: block; font: 500 .7rem var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); margin-top: 6px; }
}
/* blog-bandenmaat-omrekenen */
.bmo-venster { margin: 2em 0; }
.bmo-velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bmo-velden p { margin: 0; }
.bmo-uit { padding: 16px 22px 22px; border-top: 1px solid var(--lijn); }
.bmo-uit[hidden] { display: none; }
.bmo-maten { display: grid; gap: 10px; margin: 0 0 14px; }
.bmo-maat { display: grid; grid-template-columns: 8.5em 1fr 6.5em; gap: 10px; align-items: center; }
.bmo-code { font: 500 .95rem var(--mono); white-space: nowrap; }
.bmo-balk { display: block; height: 16px; border-radius: 3px; background: var(--grijs); position: relative; min-width: 0; }
.bmo-balk::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 3px; background: var(--asfalt); }
.bmo-maat:last-child .bmo-balk::after { background: var(--geel); }
.bmo-mm { font: 400 .85rem var(--mono); color: var(--zacht); text-align: right; white-space: nowrap; }
.bmo-feiten { list-style: none; margin: 0 0 12px; padding: 0; }
.bmo-feiten li { display: grid; grid-template-columns: 7em 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--lijn); font-size: .94rem; align-items: baseline; }
.bmo-feiten li:last-child { border-bottom: 0; }
.bmo-feiten b { font: 500 .95rem var(--mono); white-space: nowrap; }
.bmo-feiten span { color: var(--tekst); }
.bmo-oordeel { margin: 12px 0 0; padding: 10px 14px; border-radius: 6px; font-size: .97rem; }
.bmo-oordeel.ok { background: var(--groen-bg); color: #0f5132; }
.bmo-oordeel.niet { background: var(--rood-bg); color: var(--rood); }
.bmo-fig { min-width: 0; }
.bmo-fig .grafiek-as { height: 200px; }
.bmo-fig .grafiek { height: 200px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.bmo-fig figcaption { margin-top: 40px; }
.bmo-compare { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.bmo-compare li { display: grid; grid-template-columns: 6.5em 1fr; gap: 4px 14px; align-items: center; }
.bmo-compare .s { font: 500 .85rem var(--mono); color: var(--zacht); text-align: right; }
.bmo-compare .regel { display: grid; grid-template-columns: 5.5em 1fr; gap: 8px; align-items: center; font-size: .92rem; }
.bmo-compare .meter-b { height: 20px; border-radius: 4px; background: linear-gradient(90deg, var(--asfalt) var(--b), transparent var(--b)); min-width: 0; }
.bmo-compare .meter-b.voor { background: linear-gradient(90deg, var(--geel) var(--b), transparent var(--b)); }
.bmo-compare .meter-b.achter { background: linear-gradient(90deg, var(--rood) var(--b), transparent var(--b)); }
.bmo-compare .waarde { font: 400 .88rem var(--mono); white-space: nowrap; }
.bmo-legenda { display: flex; gap: 16px; font: 400 .75rem var(--mono); color: var(--zacht); margin: 12px 0 0; }
@media (max-width: 700px) { .bmo-velden { grid-template-columns: 1fr; } .bmo-maat { grid-template-columns: 7em 1fr 5.5em; } .bmo-feiten li { grid-template-columns: 1fr; gap: 2px; } .bmo-compare li { grid-template-columns: 4.5em 1fr; } }
/* blog-winterbanden-frankrijk-verplicht */
.bf-venster { box-shadow: none; border: 1px solid var(--lijn); }
.bf-venster .uitleg { padding: 14px 22px 18px; }
.bf-veld { border: 0; padding: 0; margin: 18px 0 8px; }
.bf-veld legend { font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.bf-kies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.bf-kies label { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border: 1px solid var(--lijn); border-radius: 8px; font-size: .93rem; cursor: pointer; min-width: 0; }
.bf-kies label:has(input:checked) { border-color: var(--asfalt); background: var(--grijs); }
.bf-kies input { width: 16px; height: 16px; flex: none; }
.bf-uit { padding: 4px 0 10px; }
.bf-uit[hidden] { display: none; }
.bf-dot-uit { font: 400 .92rem var(--mono); color: var(--zacht); margin: 0 0 12px; line-height: 1.55; }
.bf-landen { list-style: none; margin: 6px 0 0; padding: 0; }
.bf-landen li { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 10.5em) 1fr; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--lijn); font-size: .94rem; min-width: 0; }
.bf-landen .as-naam { font-weight: 650; }
.bf-landen .as-oordeel { font-weight: 600; }
.bf-landen .as-oordeel.ok { color: var(--groen); }
.bf-landen .as-oordeel.niet { color: var(--rood); }
.bf-landen .as-oordeel.neutraal { color: var(--zacht); font-weight: 400; }
.bf-landen .as-oordeel-tekst { font-size: .93rem; }
.bf-tijdlijn { list-style: none; margin: 0; padding: 0; }
.bf-tijdlijn li { position: relative; padding: 0 0 18px 26px; }
.bf-tijdlijn li::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--geel); box-shadow: 0 0 0 3px var(--asfalt); }
.bf-tijdlijn li::after { content: ""; position: absolute; left: 5px; top: 21px; bottom: -2px; width: 2px; background: var(--lijn); }
.bf-tijdlijn li:last-child::after { display: none; }
.bf-tijdlijn b { display: block; font: 500 1.05rem var(--mono); margin-bottom: 2px; }
.bf-tijdlijn span { font-size: .93rem; color: var(--tekst); }
.bf-citaat-fig { margin: 2em 0; }
.bf-citaat { border-left: 4px solid var(--geel); padding: 4px 0 4px 18px; font-size: 1.12rem; line-height: 1.6; margin: 0; }
.bf-citaat .vn { display: block; font: 400 .78rem var(--mono); color: var(--zacht); margin-top: 10px; }
.tabel.bf-vergelijk td, .tabel.bf-vergelijk td:nth-child(n+2) { font-family: var(--font); white-space: normal; }
.tabel.bf-vergelijk tbody th { font-family: var(--font); color: var(--tekst); white-space: normal; width: auto; }
.bf-vergelijk td.ja { color: var(--groen); font-weight: 650; }
.bf-vergelijk td.nee { color: var(--rood); font-weight: 650; }
.tabel.bf-dept td, .tabel.bf-dept td:nth-child(n+2) { font-family: var(--font); white-space: normal; font-size: .9rem; }
.bf-dept td span { font-family: var(--mono); color: var(--zacht); font-size: .82rem; }
.bf-venster-fig { margin: 2em 0; }
@media (max-width: 700px) {
  .bf-kies { grid-template-columns: minmax(0, 1fr); }
  .bf-landen li { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .bf-landen .as-oordeel-tekst { grid-column: 1 / -1; }
}
.bf-zoek-fig { margin: 2em 0; }
.bf-zoek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bf-tile { text-align: center; padding: 18px 12px 14px; border-radius: 10px; background: var(--grijs); min-width: 0; }
.bf-tile.bf-jep { background: var(--groen-bg); }
.bf-tile svg { width: 84px; height: 84px; margin: 0 auto; color: var(--asfalt); }
.bf-tile .bf-ms { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto; border: 4px solid var(--asfalt); border-radius: 50%; font: 500 1.4rem var(--mono); color: var(--asfalt); }
.bf-tile b { display: block; font: 500 .85rem var(--mono); margin: 12px 0 6px; letter-spacing: .04em; }
.bf-tile p { margin: 0; font-size: .88rem; color: var(--zacht); line-height: 1.5; }
@media (max-width: 700px) { .bf-zoek { gap: 12px; } }
/* blog-tpms-sensor */
.tps-tijdlijn { list-style: none; margin: 0; padding: 0; }
.tps-tijdlijn li { position: relative; padding: 0 0 18px 26px; }
.tps-tijdlijn li::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--geel); box-shadow: 0 0 0 3px var(--asfalt); }
.tps-tijdlijn li::after { content: ""; position: absolute; left: 5px; top: 21px; bottom: -2px; width: 2px; background: var(--lijn); }
.tps-tijdlijn li:last-child::after { display: none; }
.tps-tijdlijn b { display: block; font: 500 1.05rem var(--mono); margin-bottom: 2px; }
.tps-tijdlijn span { font-size: .93rem; color: var(--tekst); }
.tps-fig { margin: 2em 0; }
.tps-schema { width: 100%; height: auto; display: block; }
.tps-schema .tps-rand { fill: #dde2e8; stroke: var(--asfalt); stroke-width: 2; }
.tps-schema .tps-rubber { fill: var(--asfalt-2); }
.tps-schema .tps-stam, .tps-schema .tps-nek { fill: var(--wit); stroke: var(--asfalt); stroke-width: 2; }
.tps-schema .tps-dop { fill: var(--asfalt); }
.tps-schema .tps-huis { fill: var(--wit); stroke: var(--asfalt); stroke-width: 2.5; }
.tps-schema .tps-chip { fill: var(--asfalt); }
.tps-schema .tps-bat { fill: var(--geel); stroke: var(--asfalt); stroke-width: 2; }
.tps-schema .tps-golf { fill: none; stroke: var(--asfalt); stroke-width: 2; stroke-linecap: round; }
.tps-schema .tps-badge circle { fill: var(--geel); stroke: var(--asfalt); stroke-width: 2; }
.tps-schema .tps-badge text { font: 600 13px var(--mono); fill: var(--asfalt); text-anchor: middle; }
.tps-schema .tps-tekstlabels text { font: 500 11.5px var(--mono); fill: var(--tekst); }
.tps-legend { list-style: none; margin: 14px 0 0; padding: 0; display: none; grid-template-columns: minmax(0, 1fr); gap: 8px; font-size: .93rem; }
.tps-legend b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--geel); color: var(--asfalt); font: 600 .85rem var(--mono); margin-right: 8px; }
.tps-jaren-wrap { min-width: 0; }
.tps-jaren { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.tps-jaren li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 5.2em; gap: 10px; align-items: center; min-width: 0; }
.tps-jaren .j { font: 400 .8rem var(--mono); color: var(--zacht); }
.tps-jaren .balk { display: flex; height: 18px; border-radius: 3px; width: var(--w, 0%); min-width: 0; overflow: hidden; }
.tps-jaren .balk i { display: block; height: 100%; min-width: 0; flex: 1 1 0; }
.tps-jaren .balk i.a { background: var(--rood); }
.tps-jaren .balk i.b { background: var(--geel); }
.tps-jaren .balk i.c { background: var(--groen); }
.tps-jaren .n { font: 400 .8rem var(--mono); color: var(--zacht); text-align: right; white-space: nowrap; }
.tps-legenda { display: flex; flex-wrap: wrap; gap: 14px; font: 400 .75rem var(--mono); color: var(--zacht); margin: 12px 0 0; }
.tps-legenda .d { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tps-legenda .d.a { background: var(--rood); }
.tps-legenda .d.b { background: var(--geel); }
.tps-legenda .d.c { background: var(--groen); }
.tps-venster { margin: 2em 0; }
.tps-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.tps-velden p { margin: 0; }
.tps-uit { padding: 16px 22px 22px; border-top: 1px solid var(--lijn); }
.tps-uit[hidden] { display: none; }
.tps-kop { font: 400 .85rem var(--mono); color: var(--zacht); margin: 0 0 8px; }
.tps-leeftijd { margin: 0 0 12px; }
.tps-leeftijd b { display: block; font: 500 clamp(1.8rem, 3.4vw, 2.4rem)/1.15 var(--mono); color: var(--asfalt); }
.tps-leeftijd span { color: var(--zacht); font-size: .95rem; }
.tps-oordeel { margin: 0 0 12px; padding: 10px 14px; border-radius: 6px; font-size: .97rem; }
.tps-oordeel.ok { background: var(--groen-bg); color: #0f5132; }
.tps-oordeel.zone { background: #fdf6e3; color: var(--geel-inkt); }
.tps-oordeel.niet { background: var(--rood-bg); color: var(--rood); }
.tps-plicht { margin: 0 0 10px; font-size: .95rem; }
@media (max-width: 700px) {
  .tps-velden { grid-template-columns: 1fr; }
  .tps-jaren li { grid-template-columns: 2.6em minmax(0, 1fr) 4.6em; gap: 8px; }
  .tps-schema .tps-tekstlabels { display: none; }
  .tps-legend { display: grid; }
}
/* blog-balanceren-uitlijnen */
.bbu-venster { margin: 2em 0; }
.bbu-velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bbu-velden p { margin: 0; }
.bbu-velden input { width: 100%; }
.bbu-uit { padding: 16px 22px 22px; border-top: 1px solid var(--lijn); }
.bbu-uit[hidden] { display: none; }
.bbu-balken { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.bbu-balken li { display: grid; grid-template-columns: 10.5em minmax(0, 1fr) 5.5em; gap: 10px; align-items: center; min-width: 0; }
.bbu-naam { font: 500 .8rem var(--mono); color: var(--zacht); }
.bbu-balk { display: block; height: 16px; border-radius: 3px; background: var(--grijs); position: relative; min-width: 0; }
.bbu-balk::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 3px; background: var(--asfalt); }
.bbu-balk.zwaar::after { background: var(--geel); }
.bbu-waarde { font: 500 .85rem var(--mono); white-space: nowrap; text-align: right; }
.bbu-uit .bmo-feiten li { grid-template-columns: 9.5em minmax(0, 1fr); }
.bbu-uit .bmo-feiten b { white-space: normal; }
.bbu-fig { margin: 2em 0; min-width: 0; }
.bbu-delen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bbu-deel { min-width: 0; }
.bbu-deel h3 { margin-top: 14px; }
.bbu-deel p { font-size: .97rem; color: var(--zacht); margin: 0; }
.bbu-wiel { position: relative; width: 130px; height: 130px; border: 3px solid var(--asfalt); border-radius: 50%; }
.bbu-wiel .as { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--asfalt); }
.bbu-wiel .lood { position: absolute; left: 82%; top: 12%; width: 16px; height: 16px; border-radius: 50%; background: var(--geel); }
.bbu-wiel .pijl { position: absolute; left: 50%; top: 50%; width: 46px; height: 3px; background: var(--geel); transform-origin: left center; transform: rotate(24deg); }
.bbu-stand { position: relative; width: 130px; height: 130px; }
.bbu-stand .recht { position: absolute; left: 65px; top: 0; bottom: 0; border-left: 3px dashed #c3c9d0; }
.bbu-stand .scheef { position: absolute; left: 65px; top: 6px; bottom: 6px; width: 44px; border-left: 10px solid var(--asfalt); border-radius: 8px; transform: rotate(8deg); transform-origin: center; }
.bbu-fig2 { min-width: 0; }
.bbu-fig2 .grafiek-as { height: 200px; }
.bbu-fig2 .grafiek { height: 200px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bbu-fig2 figcaption { margin-top: 40px; }
@media (max-width: 700px) { .bbu-velden { grid-template-columns: 1fr; } .bbu-delen { grid-template-columns: 1fr; } .bbu-balken li { grid-template-columns: 7.5em minmax(0, 1fr) 4.8em; } }

/* blog-banden-gecupt */
.bgc-patronen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 2em 0; }
.bgc-patroon-tile { text-align: center; padding: 18px 12px 14px; border-radius: 10px; background: var(--grijs); min-width: 0; }
.bgc-patroon-tile.bgc-opvalt { background: var(--groen-bg); }
.bgc-patroon-tile svg { width: 100%; max-width: 300px; height: auto; margin: 0 auto; display: block; }
.bgc-patroon-tile b { display: block; font: 500 .85rem var(--mono); margin: 12px 0 6px; letter-spacing: .04em; }
.bgc-patroon-tile p { margin: 0; font-size: .88rem; color: var(--zacht); line-height: 1.5; }
.bgc-cijfer { font: 500 1.9rem/1.1 var(--mono); color: var(--asfalt); }
.bgc-venster { box-shadow: none; border: 1px solid var(--lijn); }
.bgc-veld { border: 0; padding: 0; margin: 18px 0 8px; min-width: 0; }
.bgc-veld legend { font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.bgc-kies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.bgc-kies label { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border: 1px solid var(--lijn); border-radius: 8px; font-size: .93rem; cursor: pointer; min-width: 0; }
.bgc-kies label:has(input:checked) { border-color: var(--asfalt); background: var(--grijs); }
.bgc-kies input { width: 16px; height: 16px; flex: none; }
.bgc-symptomen { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 4px; }
.bgc-symptomen label { display: flex; gap: 8px; align-items: center; font-size: .93rem; cursor: pointer; }
.bgc-symptomen input { width: 16px; height: 16px; flex: none; }
.bgc-uit { padding: 4px 0 10px; }
.bgc-uit[hidden] { display: none; }
.bgc-uit .uit-kop { font-weight: 650; font-size: 1.02rem; margin: 10px 0 6px; }
.bgc-kant { border-left: 4px solid var(--geel); padding: 4px 0 4px 14px; color: var(--zacht); font-size: .92rem; }
@media (max-width: 700px) {
  .bgc-patronen { gap: 12px; }
  .bgc-kies { grid-template-columns: minmax(0, 1fr); }
}

/* blog-sneeuwkettingen-verplicht */
.kz-veld { border: 0; padding: 0; margin: 18px 0 8px; }
.kz-veld legend { font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.kz-kies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.kz-kies label { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border: 1px solid var(--lijn); border-radius: 8px; font-size: .93rem; cursor: pointer; min-width: 0; }
.kz-kies label:has(input:checked) { border-color: var(--asfalt); background: var(--grijs); }
.kz-kies input { width: 16px; height: 16px; flex: none; }
.kz-uit { padding: 4px 0 10px; }
.kz-uit[hidden] { display: none; }
.kz-keuzes { font: 400 .92rem var(--mono); color: var(--zacht); margin: 0 0 12px; line-height: 1.55; }
.kz-lijst { list-style: none; margin: 6px 0 0; padding: 0; }
.kz-lijst li { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); gap: 2px 14px; padding: 11px 0; border-bottom: 1px solid var(--lijn); font-size: .94rem; min-width: 0; }
.kz-lijst .kz-status { font-weight: 650; }
.kz-lijst .kz-status.ok { color: var(--groen); }
.kz-lijst .kz-status.niet { color: var(--rood); }
.kz-lijst .kz-status.neutraal { color: var(--zacht); font-weight: 500; }
.kz-lijst .kz-kolom { display: grid; gap: 3px; min-width: 0; }
.kz-lijst .kz-kolom b { font-size: .95rem; }
.kz-lijst .kz-kolom span { font-size: .93rem; }
.kz-lijst .kz-bron { font: 400 .78rem var(--mono); color: var(--zacht); }
.kz-bord { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 2em 0; min-width: 0; }
.kz-bord figure { margin: 0; min-width: 0; }
.kz-bord .bordje { aspect-ratio: 1 / 1; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.kz-bord .bordje svg { width: 62%; height: 62%; }
.kz-bord figcaption { font: 400 .78rem var(--mono); color: var(--zacht); margin-top: 8px; line-height: 1.45; }
@media (max-width: 700px) {
  .kz-kies { grid-template-columns: minmax(0, 1fr); }
  .kz-lijst li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .kz-bord { grid-template-columns: minmax(0, 1fr); }
}
.kz-citaat-fig { margin: 2em 0; }
.kz-citaat { border-left: 4px solid var(--geel); padding: 4px 0 4px 18px; font-size: 1.12rem; line-height: 1.6; margin: 0; }
.kz-citaat .vn { display: block; font: 400 .78rem var(--mono); color: var(--zacht); margin-top: 10px; }
/* blog-winterbanden-zwitserland */
.wz-venster { box-shadow: none; border: 1px solid var(--lijn); }
.wz-venster .uitleg { padding: 14px 22px 18px; }
.wz-veld { border: 0; padding: 0; margin: 18px 0 8px; }
.wz-veld legend { font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.wz-kies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.wz-kies label { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border: 1px solid var(--lijn); border-radius: 8px; font-size: .93rem; cursor: pointer; min-width: 0; }
.wz-kies label:has(input:checked) { border-color: var(--asfalt); background: var(--grijs); }
.wz-kies input { width: 16px; height: 16px; flex: none; }
.wz-uit { padding: 4px 0 10px; }
.wz-uit[hidden] { display: none; }
.wz-keuzes { font: 400 .92rem var(--mono); color: var(--zacht); margin: 0 0 12px; line-height: 1.55; }
.wz-lijst { list-style: none; margin: 6px 0 0; padding: 0; }
.wz-lijst li { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); gap: 2px 14px; padding: 11px 0; border-bottom: 1px solid var(--lijn); font-size: .94rem; min-width: 0; }
.wz-lijst .wz-status { font-weight: 650; }
.wz-lijst .wz-status.ok { color: var(--groen); }
.wz-lijst .wz-status.niet { color: var(--rood); }
.wz-lijst .wz-status.neutraal { color: var(--zacht); font-weight: 500; }
.wz-lijst .wz-kolom { display: grid; gap: 3px; min-width: 0; }
.wz-lijst .wz-kolom b { font-size: .95rem; }
.wz-lijst .wz-kolom span { font-size: .93rem; }
.wz-lijst .wz-bron { font: 400 .78rem var(--mono); color: var(--zacht); }
.wz-venster select, .wz-venster input[name="profiel"] { font: inherit; }
.wz-bord { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-merken { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .wz-kies { grid-template-columns: minmax(0, 1fr); }
  .wz-lijst li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .wz-bord { grid-template-columns: minmax(0, 1fr); }
  .wz-merken { gap: 12px; }

/* blog-banden-xl */
.bxl-fig { margin: 2em 0; min-width: 0; }
.bxl-verdeling { min-width: 0; }
.bxl-staven { display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); gap: 4px; align-items: end; height: 170px; }
.bxl-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; align-items: end; height: 100%; }
.bxl-paar i { display: block; height: var(--h, 0); border-radius: 2px 2px 0 0; min-width: 0; }
.bxl-paar i.v { background: var(--asfalt); }
.bxl-paar i.a { background: var(--geel); }
.bxl-as { display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); gap: 4px; margin: 6px 0 0; font: 400 .7rem var(--mono); color: var(--zacht); }
.bxl-as span { text-align: center; min-width: 0; }
.bxl-as span:nth-child(2n) { visibility: hidden; }
.bxl-legenda { list-style: none; display: flex; gap: 16px; margin: 10px 0 0; padding: 0; font: 400 .75rem var(--mono); color: var(--zacht); }
.bxl-legenda li::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bxl-legenda li.v::before { background: var(--asfalt); }
.bxl-legenda li.a::before { background: var(--geel); }
.bxl-venster { margin: 2em 0; }
.bxl-velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.bxl-velden p { margin: 0; }
.bxl-velden input { width: 100%; }
.bxl-uit { padding: 16px 22px 22px; border-top: 1px solid var(--lijn); }
.bxl-uit[hidden] { display: none; }
@media (max-width: 700px) {
  .bxl-velden { grid-template-columns: 1fr; }
  .bxl-staven { height: 130px; gap: 3px; }
  .bxl-paar { gap: 1px; }
  .bxl-as { gap: 3px; }
  .bxl-as span:nth-child(4n+1) { visibility: visible; }
  .bxl-as span:nth-child(2n) { visibility: hidden; }
}
/* blog-banden-xl: aandelentabel past op 390 px */
.tabel-scroll .tabel.bxl-smal { min-width: 0; }
.bxl-smal tbody th { width: auto; white-space: nowrap; }