/* ─────────────────────────────────────────────────────────────
   Autoaccessoires.nl — ontwerpsysteem "Vind goedkoper"
   Licht & luchtig (Hero A): witte canvas, donkere header/footer,
   één oranje accent. Manrope als enige font.

   Overgezet uit de Astro-versie: src/styles/fonts.css +
   src/styles/tokens.css, gevolgd door de <style>-blokken die daar
   per component in het .astro-bestand zaten. Volgorde doet ertoe:
   de .prose-regels uit tokens.css staan bewust vóór de
   component-secties, zodat .blockbody die kan overrulen.
   ───────────────────────────────────────────────────────────── */

/* ══ 1. Font ═══════════════════════════════════════════════════
   Manrope, lokaal self-hosted (variabel gewicht 200–800), géén
   externe requests naar Google Fonts. Bestanden in /public/fonts. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-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: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ══ 2. Tokens ════════════════════════════════════════════════ */
:root {
  /* accent */
  --accent: #ff6a00;
  --accent-600: #e65f00; /* hover */
  /* Tekst op licht / badges. Was #c8530a en haalde daarmee 4,47:1 op wit —
     net onder de WCAG-eis van 4,5:1. Deze tint haalt 4,64:1 en scheelt met het
     blote oog niets. */
  --accent-700: #c45108;
  --accent-50: #fff1e8; /* zachte tint */
  --accent-200: #ffd9bf; /* rand op tint */
  /* Tekstkleur op een oranje vlak. Wit haalt op #ff6a00 maar 2,9:1 en zakt
     daarmee ruim onder de WCAG-eis van 4,5:1; deze inkt haalt 6,3:1 en houdt
     het merkoranje intact. */
  --on-accent: #14171c;

  /* inkt / tekst */
  --ink: #14171c;
  --ink-2: #5c636e;
  --ink-3: #6a7280;
  --muted: #8a909a;
  --muted-2: #9aa0aa;
  --faint: #a6abb3;

  /* vlakken (licht) */
  --bg: #ffffff;
  --bg-soft: #fbfbfc;
  --bg-tint: #f4f5f7;
  --bg-tile: #eef0f3;

  /* lijnen */
  --line: #e7e9ed;
  --line-2: #eef0f3;

  /* donkere modules (header/footer/hero B) */
  --dark: #1a1d22;
  --dark-2: #16181c;
  --dark-chip: #272b32;
  --line-dark: #2a2e36;

  /* tekst op donker */
  --on-dark: #ffffff;
  --on-dark-soft: #d6d9de;
  --on-dark-mute: #a8aeb8;
  --on-dark-faint: #6e747e;

  /* functioneel */
  --ok: #1f8a5b;
  --urgent: #c8452e;

  /* type */
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* maat */
  --maxw: 1280px;
  --radius-card: 16px;
  --radius-tile: 14px;
  --radius-btn: 10px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 12px 30px rgba(20, 23, 28, 0.12);

  /* ── legacy-aliassen: oude redactie-componenten blijven bouwen
        tot Fase 2 ze verwijdert. Niet gebruiken in nieuwe code. ── */
  --asphalt: var(--dark);
  --asphalt-2: var(--dark-2);
  --asphalt-3: #0c0e12;
  --paper: var(--bg-soft);
  --paper-card: #ffffff;
  --paper-tint: var(--bg-tint);
  --amber: var(--accent);
  --steel: var(--muted);
  --lane: var(--line);
  --ink-soft: #262a30;
  --ink-mute: var(--ink-2);
  --ink-faint: var(--ink-3);
  --in-stock: var(--ok);
  --in-stock-ink: #2f7a4f;
  --urgent-ink: #b23a22;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-mono: var(--font-sans);
  --maxw-narrow: 1120px;
  --read: 680px;
  --radius: var(--radius-tile);
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
}
::selection {
  background: var(--accent);
  color: var(--on-accent);
}
*::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(120, 128, 140, 0.4);
  border-radius: 8px;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* layout-helpers */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: 40px;
}
.eyebrow {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-50);
  border: 1px solid var(--accent-200);
  color: var(--accent-700);
  font-weight: 700;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
}
.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

@media (max-width: 640px) {
  .wrap {
    padding-inline: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── Leeskolom-prose (oude artikel-render; vars draaien op aliassen) ── */
.prose {
  color: var(--ink-soft);
}
.prose > :first-child {
  margin-top: 0;
}
.prose h2,
.prose h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.12;
}
.prose h2 {
  font-size: clamp(24px, 3.4vw, 31px);
  margin: 46px 0 0;
}
.prose h3 {
  font-size: clamp(22px, 2.8vw, 27px);
  margin: 42px 0 0;
}
.prose p {
  font-size: 17px;
  line-height: 1.72;
  margin: 14px 0 0;
}
.prose ul,
.prose ol {
  margin: 16px 0 0;
  padding-left: 1.1em;
  display: grid;
  gap: 10px;
}
.prose strong {
  color: var(--ink);
  font-weight: 700;
}
/* Alleen kále links: een <a> mét klasse is een component — een knop, een
   productnaam — die zijn eigen kleur meebrengt. Stond hier `.prose a`, dan won
   die (specificiteit 0,1,1) van `.pick__cta` en `.cmp__cta` (0,1,0), en kreeg
   de oranje knop oranje tekst: 1,6:1, in de praktijk onleesbaar. `.cmp__name`
   ging op dezelfde manier van inkt naar oranje. Onderstrepen deed het ook bij
   alle drie. Voeg je hier een selector toe, houd `:not([class])` dan intact. */
.prose a:not([class]) {
  color: var(--accent-700);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

/* ══ 3. Layout-chrome (Base.astro) ════════════════════════════ */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  font-weight: 700;
  border-radius: 0 0 8px 0;
}
.skip:focus {
  left: 0;
}
main {
  display: block;
}

/* ══ 4. Header ════════════════════════════════════════════════ */
.hd {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--dark);
}
.hd__inner {
  max-width: 1520px;
  margin: 0 auto;
  height: 74px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.hd__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
}
.hd__mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  flex: none;
}
/* Eigen logo. De hoogte komt als eigenschap mee vanuit de instellingen; de
   breedte volgt zodat het nooit vervormt. `max-width` is de rem: een heel breed
   logo mag de navigatie niet van het scherm duwen. */
.hd__logo {
  height: var(--logo-mobiel, 28px);
  width: auto;
  max-width: 62vw;
  display: block;
}
@media (min-width: 740px) {
  .hd__logo {
    height: var(--logo-desktop, 34px);
    max-width: 320px;
  }
}
.hd__name {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}
.hd__tld {
  color: var(--accent);
}
.hd__nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.hd__link {
  font-weight: 600;
  font-size: 15px;
  color: var(--on-dark-soft);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.hd__link--strong {
  color: #fff;
  font-weight: 700;
}
.hd__link:hover,
.hd__link.is-active {
  color: var(--accent);
}
.hd__toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 9px;
  background: var(--dark-chip);
  color: #fff;
  cursor: pointer;
  place-items: center;
}

/* Hamburger of kruis, afhankelijk van of het menu openstaat.

   Gestuurd door `aria-expanded` op de knop en niet door een eigen klasse: dat
   attribuut wordt toch al bijgewerkt en is wat hulpsoftware voorleest. Zo kan
   het icoon niet iets anders zeggen dan de knop. Beide iconen staan in de
   opmaak; alleen de zichtbaarheid wisselt, dus er is geen tweede laadmoment. */
.hd__ic {
  display: inline-flex;
  /* Ze staan op dezelfde plek, zodat de knop niet verspringt bij het wisselen. */
  grid-area: 1 / 1;
}
.hd__ic--sluit,
.hd__toggle[aria-expanded='true'] .hd__ic--menu {
  display: none;
}
.hd__toggle[aria-expanded='true'] .hd__ic--sluit {
  display: inline-flex;
}

@media (max-width: 1023px) {
  .hd__inner {
    padding: 0 18px;
    height: 60px;
  }
  .hd__toggle {
    display: grid;
  }

  /* Het menu hangt ónder de balk in plaats van erin.
     Eerder stond hier `flex-wrap: wrap` met een nav van `width: 100%`, zodat
     het menu een tweede regel werd binnen een container die op 60px vastzat.
     Gevolg: het menu viel buiten de header, en omdat de achtergrond op .hd zit
     en niet op het menu zelf, zweefde het zonder achtergrond over de pagina.
     Datzelfde omvouwen herverdeelde ook logo en knop over de balk — het
     verspringen dat je zag bij het openen.

     Absoluut ten opzichte van .hd (die is sticky en dus een positioneringspunt),
     zodat de balk zelf onaangeroerd 60px blijft. */
  .hd__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px 18px 14px;
    background: var(--dark);
    border-top: 1px solid var(--line-dark);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
    /* Past het niet op een klein scherm, dan scrollt het menu zelf in plaats
       van door te lopen tot buiten beeld. */
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
  }
  .hd__nav.is-open {
    display: flex;
  }
  .hd__link {
    width: 100%;
    padding: 12px 4px;
    border-bottom: 1px solid var(--line-dark);
    font-size: 16px;
  }
  .hd__link:last-child {
    border-bottom: 0;
  }
}

/* ══ 5. Footer ════════════════════════════════════════════════ */
.ft {
  background: var(--dark);
  color: var(--muted-2);
}
.ft__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 48px 40px 32px;
}
.ft__cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line-dark);
}
.ft__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ft__mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
}
.ft__name {
  font-weight: 800;
  font-size: 17px;
  color: #fff;
}
.ft__tld {
  color: var(--accent);
}
.ft__tag {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
}
.ft__head {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  margin-bottom: 13px;
}
.ft__links {
  display: grid;
  gap: 9px;
}
.ft__links a {
  color: var(--muted-2);
  font-size: 14px;
  transition: color 0.15s ease;
}
.ft__links a:hover {
  color: var(--accent);
}
.ft__disclosure {
  margin: 24px 0 0;
  padding: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--on-dark-faint);
}
.ft__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  flex-wrap: wrap;
  gap: 14px;
}
.ft__legal {
  font-size: 13px;
}
.ft__company {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--on-dark-faint);
}
.ft__badges {
  display: flex;
  gap: 20px;
}
.ft__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-2);
}
.ft__badge svg {
  color: var(--accent);
}
@media (max-width: 760px) {
  .ft__cols {
    grid-template-columns: 1fr 1fr;
  }
  .ft__about {
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px) {
  .ft__inner {
    padding: 40px 22px 28px;
  }
}

/* ══ 6. Broodkruimel ══════════════════════════════════════════ */
.crumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-3);
}
.crumb li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.crumb a {
  color: var(--ink-3);
  transition: color 0.15s ease;
}
.crumb a:hover {
  color: var(--accent-700);
}
.crumb [aria-current] {
  color: var(--ink);
  font-weight: 600;
}
.crumb__sep {
  color: var(--faint);
  display: inline-flex;
}

/* ══ 7. CoverImage ════════════════════════════════════════════ */
.cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cover--tint {
  background: var(--bg-tile);
}

/* ══ 8. StarRating ════════════════════════════════════════════ */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.stars__row {
  display: inline-flex;
  gap: 2px;
}
.stars__ic {
  color: var(--line);
  display: inline-flex;
}
.stars__ic.is-on {
  color: var(--accent);
}
.stars__val {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}

/* ══ 9. ArticleCard ═══════════════════════════════════════════ */
.acard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease;
}
.acard:hover {
  box-shadow: var(--shadow-pop);
  transform: translateY(-3px);
  border-color: var(--line);
}
.acard__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-tile);
  display: grid;
  place-items: center;
  flex: none;
}
.acard__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(26, 29, 34, 0.82);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  text-transform: capitalize;
  padding: 5px 10px;
  border-radius: 7px;
  z-index: 1;
}
.acard__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.acard__title {
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.acard__dek {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.acard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
.acard__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.acard__go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-700);
}

/* ══ 10. CategoryTile ═════════════════════════════════════════ */
.cat {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  padding: 22px;
  height: 100%;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.cat:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(20, 23, 28, 0.08);
}
.cat__icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--dark);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.cat__title {
  display: block;
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 5px;
}
.cat__sub {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.cat__go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-700);
}

/* ══ 11. AffiliateDisclaimer ══════════════════════════════════ */
/* Eén regel, geen blok.

   De melding moet vóór de affiliate-links staan — dat is de strekking van de
   Associates-overeenkomst en van de reclameregels, en onderaan zou betekenen
   dat de meeste lezers al geklikt hebben voor ze hem zien. Maar ze hoeft de
   pagina ook niet te openen met een omkaderd waarschuwingsvak: als dunne regel
   is ze even goed te lezen en neemt ze een derde van de ruimte.

   Ze verschijnt alleen op artikelen die daadwerkelijk affiliate-links bevatten;
   zie article.blade.php. */
.disc {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.disc__ic {
  color: var(--accent-700);
  flex: none;
  /* Uitlijnen op de basislijn van de tekst in plaats van op de bovenkant. */
  align-self: center;
}
.disc a {
  color: var(--accent-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══ 12. AuthorBlock ══════════════════════════════════════════ */
.author {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px;
}
.author__avatar {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--dark);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex: none;
}
.author__name {
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 6px;
}
.author__blurb {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ══ 13. RelatedArticles ══════════════════════════════════════ */
.rel__title {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 18px;
}
.rel__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 860px) {
  .rel__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .rel__grid {
    grid-template-columns: 1fr;
  }
}

/* ══ 14. FaqAccordion ═════════════════════════════════════════ */
.faq__title {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 18px;
}
.faq__list {
  display: grid;
  gap: 12px;
}
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: #fff;
  overflow: hidden;
}
.faq__item[open] {
  border-color: var(--accent-200);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  list-style: none;
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__chev {
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  margin-top: -4px;
}
.faq__item[open] .faq__chev {
  transform: rotate(-135deg);
  margin-top: 4px;
}
.faq__a {
  padding: 0 18px 18px;
}
.faq__a :first-child {
  margin-top: 0;
}
.faq__a p {
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0 0 10px;
}

/* ══ 15. OnzeCijfers ══════════════════════════════════════════ */
.cijfers {
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px 28px;
}
.cijfers__title {
  margin: 0 0 18px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cijfers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 22px;
}
.cijfers__num {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--accent-700);
}
.cijfers__aff {
  font-size: 18px;
}
.cijfers__label {
  margin-top: 4px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.cijfers__sub {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}
.cijfers__src {
  margin: 18px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
.cijfers__src a {
  color: var(--accent-700);
  text-decoration: underline;
}

/* ══ 16. PickBlock (productkaart) ═════════════════════════════ */
.pick {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px;
  background: #fff;
  scroll-margin-top: 90px;
}
.pick__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-tile);
  border-radius: var(--radius-tile);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.pick__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 7px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  z-index: 1;
}
.pick__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.pick__no {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--dark);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.pick__brand {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-700);
  margin-bottom: 2px;
}
.pick__name {
  margin: 0;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.pick__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pick__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain, niet cover: productfoto's staan op wit en mogen niet bijgesneden. */
  object-fit: contain;
  padding: 12px;
  display: block;
}
.pick__price {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
}
.pick__pricelabel {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-3);
}
.pick__forwho {
  margin: 14px 0 0;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.pick__forwho strong {
  color: var(--ink);
}
.pick__specs {
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  overflow: hidden;
}
.pick__spec {
  background: var(--bg-soft);
  padding: 9px 12px;
}
.pick__spec dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  font-weight: 700;
}
.pick__spec dd {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.pick__pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 22px;
  margin-top: 16px;
}
.pick__pros,
.pick__cons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
  line-height: 1.45;
}
.pick__pros li,
.pick__cons li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink-2);
}
.pick__ic {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.pick__ic--ok {
  background: rgba(31, 138, 91, 0.14);
  color: var(--ok);
}
.pick__ic--no {
  background: var(--bg-tile);
  color: var(--muted);
}
.pick__text {
  margin-top: 16px;
}
.pick__text p {
  font-size: 15.5px;
  line-height: 1.65;
  margin: 12px 0 0;
}
.pick__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 20px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: var(--radius-btn);
  transition: background 0.15s ease;
}
.pick__cta:hover {
  background: var(--accent-600);
}
.pick__ctax {
  display: inline-flex;
}
@media (max-width: 700px) {
  .pick {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .pick__media {
    aspect-ratio: 16 / 9;
  }
  .pick__pc,
  .pick__specs {
    grid-template-columns: 1fr;
  }
}

/* ══ 17. ComparisonTable ══════════════════════════════════════ */
.cmp {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.cmp__scroll {
  overflow-x: auto;
}
.cmp__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}
.cmp__table thead th {
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-tint);
  padding: 12px 14px;
  white-space: nowrap;
}
.cmp__table tbody td {
  padding: 14px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.cmp__name {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 700;
  color: var(--ink);
}
.cmp__name:hover {
  color: var(--accent-700);
}
.cmp__badge {
  align-self: flex-start;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.cmp__spec {
  color: var(--ink-2);
}
.cmp__price {
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cmp__pricedate {
  display: block;
  font-weight: 600;
  font-size: 11px;
  color: var(--ink-3);
}
.cmp__ctacell {
  text-align: right;
}
.cmp__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: var(--radius-btn);
  white-space: nowrap;
  transition: background 0.15s ease;
}
.cmp__cta:hover {
  background: var(--accent-600);
}
.cmp__ctax {
  display: inline-flex;
}

/* Op een smal scherm stapelt de vergelijkingstabel tot een kaartje per product.

   De tabel is minstens 560px breed en zat in een vak dat op een telefoon zo'n
   345px meet: er stond dus bijna de helft buiten beeld. Hij scrolde wel
   zijwaarts, maar zonder zichtbare aanwijzing — je zag een afgekapte tabel en
   moest maar raden dat er meer was. Vijf kolommen naast elkaar zijn op die
   breedte sowieso niet te lezen, dus zijwaarts scrollen is hier niet de
   oplossing maar het probleem.

   De kolomkoppen verdwijnen bij het stapelen; `data-kolom` op de cel zet het
   label vóór de waarde terug (zie comparison-table.blade.php). Dat attribuut
   moet expliciet langs de HtmlSanitizer — zie AppServiceProvider, en de test
   in FrontendTest die daarop let.

   739px is gemeten en geen rond getal: vanaf 740px past de tabel volledig in
   de tekstkolom. Leg je de grens lager, dan houd je een strook over die
   buiten beeld valt zonder dat iemand dat ziet. */
@media (max-width: 739px) {
  .cmp__scroll {
    overflow-x: visible;
  }
  .cmp__table {
    min-width: 0;
  }
  .cmp__table,
  .cmp__table tbody,
  .cmp__table tr,
  .cmp__table td {
    display: block;
    width: auto;
  }
  .cmp__table thead {
    display: none;
  }
  .cmp__table tbody tr {
    padding: 14px;
    border-top: 1px solid var(--line);
  }
  .cmp__table tbody tr:first-child {
    border-top: 0;
  }
  .cmp__table tbody td {
    padding: 0;
    border-top: 0;
  }
  .cmp__prod {
    margin-bottom: 4px;
  }
  /* Label links, waarde rechts — leest als een specificatielijstje. */
  .cmp__table tbody td[data-kolom] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-top: 1px dashed var(--line);
  }
  .cmp__table tbody td[data-kolom]::before {
    content: attr(data-kolom);
    flex: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .cmp__ctacell {
    margin-top: 12px;
    text-align: left;
  }
  .cmp__cta {
    display: flex;
    justify-content: center;
    padding: 12px 14px;
    font-size: 14px;
  }
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ══ 18. Artikelinhoud (BlockRenderer → RichContentRenderer) ══ */
.blockbody {
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-2);
}
.blockbody h2,
.bb__h2 {
  font-weight: 800;
  font-size: clamp(23px, 3.4vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--ink);
  margin: 40px 0 14px;
  scroll-margin-top: 90px;
}
.blockbody > h2:first-child,
.bb__h2:first-child {
  margin-top: 8px;
}
.blockbody h3,
.bb__h3 {
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  margin: 30px 0 10px;
  scroll-margin-top: 90px;
}
.blockbody p {
  font-size: 17px;
  margin: 0 0 18px;
}
/* Zie `.prose a:not([class])`: knoppen binnen de tekst houden hun eigen kleur. */
.blockbody a:not([class]) {
  color: var(--accent-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blockbody ul,
.blockbody ol {
  display: block;
  margin: 0 0 18px;
  padding-left: 22px;
}
.blockbody li {
  margin-bottom: 8px;
}
/* TipTap zet elk lijstitem als <li><p>…</p></li>; die alinea mag geen eigen
   ondermarge krijgen, anders valt het lijstje uit elkaar. */
.blockbody li > p,
.blockbody blockquote > p:last-child {
  margin-bottom: 0;
}
.blockbody blockquote,
.bb__quote {
  margin: 24px 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--ink);
}
.blockbody blockquote cite,
.bb__quote cite {
  display: block;
  font-style: normal;
  font-size: 14px;
  color: var(--ink-3);
  margin-top: 8px;
}
.bb__figure {
  margin: 28px 0;
}
.bb__img {
  position: relative;
  height: 320px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bg-tile);
}
.bb__figure figcaption {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 8px;
}
.bb__stat,
.bb__product,
.bb__comparison {
  margin: 32px 0;
}
.bb__cta {
  margin: 28px 0;
  background: var(--accent-50);
  border: 1px solid var(--accent-200);
  border-radius: var(--radius-card);
  padding: 24px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
}
.bb__cta-heading {
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 6px;
}
.bb__cta-text p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  max-width: 400px;
}
.bb__cta-btn {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  white-space: nowrap;
}
.bb__cta-btn:hover {
  background: var(--accent-600);
}

/* ══ 19. Artikelpagina ════════════════════════════════════════ */
.art__inner {
  max-width: 840px;
  padding-block: 28px 80px;
}
.art__head {
  margin-top: 20px;
}
.art__h1 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(30px, 5.2vw, 46px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink);
}
.art__dek {
  margin: 16px 0 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
}
.art__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.art__read {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.art__sep {
  color: var(--faint);
}
.art__disc {
  margin-top: 22px;
}
.art__body {
  margin-top: 24px;
}
.art__faq,
.art__rel,
.art__author {
  margin-top: 48px;
}

/* ══ 20. CMS-pagina ═══════════════════════════════════════════ */
.page__inner {
  max-width: var(--read, 760px);
  padding-block: 28px 80px;
}
.page__h1 {
  margin: 20px 0 0;
  font-weight: 800;
  font-size: clamp(30px, 5vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink);
}
.page__lede {
  margin: 16px 0 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
}
.page__body {
  margin-top: 24px;
}

/* ══ 21. Homepage ═════════════════════════════════════════════ */
.hero {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.hero__inner {
  padding-block: 68px 56px;
}
.hero__copy {
  max-width: 720px;
}
.hero__h1 {
  margin: 18px 0 0;
  font-weight: 800;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.hero__sub {
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 620px;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.hero__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: var(--radius-btn);
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.btn--primary {
  background: var(--accent);
  /* Donkere inkt op oranje: wit haalt hier maar 2,9:1 (WCAG-eis 4,5:1). */
  color: var(--on-accent);
}
.btn--primary:hover {
  background: var(--accent-600);
}
.btn--ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover {
  border-color: var(--accent);
}

.block {
  padding-block: 56px 0;
}
.block:last-of-type {
  padding-bottom: 8px;
}
.block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.block__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(24px, 3.5vw, 30px);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.block__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-700);
  white-space: nowrap;
}

.trust {
  margin-top: 64px;
  background: var(--dark);
  color: var(--on-dark-soft);
}
.trust__inner {
  padding-block: 60px;
}
.trust__head {
  margin-bottom: 32px;
}
.trust__title {
  margin: 8px 0 0;
  font-weight: 800;
  font-size: clamp(24px, 3.5vw, 32px);
  letter-spacing: -0.02em;
  color: #fff;
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.trust__item h3 {
  margin: 14px 0 8px;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}
.trust__item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-dark-mute);
}
.trust__item a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.trust__ic {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--dark-chip);
  color: var(--accent);
  display: grid;
  place-items: center;
}

@media (max-width: 940px) {
  .hero__inner {
    padding-block: 48px;
  }
  .hero__cards {
    grid-template-columns: 1fr 1fr;
    margin-top: 36px;
  }
  .trust__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .hero__cards {
    grid-template-columns: 1fr;
  }
  .block__more {
    display: none;
  }
}

/* ══ 22. Hubs (blog + koopgidsen) ═════════════════════════════ */
.hub {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 44px;
}
.hub__h1 {
  margin: 12px 0 0;
  font-weight: 800;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink);
}
.hub__intro {
  margin: 16px 0 0;
  max-width: 680px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}
.hub__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--accent-700);
}
.hub__body {
  padding-block: 44px 72px;
}

/* ══ 23. Categorie-landing ════════════════════════════════════ */
.clead {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 40px;
}
.clead__h1 {
  margin: 12px 0 0;
  font-weight: 800;
  font-size: clamp(30px, 5vw, 48px);
  letter-spacing: -0.025em;
  line-height: 1.06;
  color: var(--ink);
}
.cbody {
  padding-block: 40px 72px;
}
.cbody__title {
  margin: 0 0 22px;
  font-weight: 800;
  font-size: clamp(22px, 3.4vw, 28px);
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ══ 24. Gedeelde raster/lege-staat ═══════════════════════════ */
.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid--cats {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.empty {
  font-size: 16px;
  color: var(--ink-2);
}
@media (max-width: 940px) {
  .grid--3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 860px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .grid--3 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* ══ 25. Niet gevonden ════════════════════════════════════════ */
.nf {
  padding-block: 72px 96px;
}
.nf__h1 {
  font-weight: 800;
  font-size: clamp(30px, 6vw, 46px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 10px 0 0;
}
.nf__p {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 560px;
  margin: 14px 0 0;
}
.nf__p a {
  color: var(--accent-700);
  text-decoration: underline;
}
.nf__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}


/* ══ 20. Formulieren ══════════════════════════════════════════
   Als kaart, net als de productblokken in een artikel: het formulier staat
   midden in lopende tekst en moet zich daar als een eigen blok van afzonderen,
   niet als losse velden tussen de alinea's hangen. */
.form {
  margin: 34px 0 8px;
  padding: 26px 28px 28px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.form__body {
  display: grid;
  gap: 18px;
  /* Ruim genoeg voor een adres van normale lengte, smal genoeg om niet als een
     eindeloze balk over de volle breedte te lopen. */
  max-width: 560px;
}

/* Meldingen */
.form__ok,
.form__fout {
  display: flex;
  gap: 10px;
  margin: 0 0 20px;
  padding: 13px 16px;
  border-radius: var(--radius-btn);
  font-size: 14.5px;
  line-height: 1.55;
}
.form__ok {
  background: #eef7f1;
  border: 1px solid #c9e4d3;
  color: #1c5c34;
}
.form__fout {
  background: var(--accent-50);
  border: 1px solid var(--accent-200);
  color: var(--accent-700);
}

/* Velden */
.form__rij {
  display: grid;
  gap: 7px;
}
.form__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.form__opt {
  margin-left: 6px;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink-3);
}
.form__uitleg {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.form__veld {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--bg);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  /* Zonder dit zetten browsers hun eigen systeemfont op select en textarea. */
  font-family: var(--font-sans);
}
.form__veld::placeholder {
  color: var(--faint);
}
.form__veld:hover {
  border-color: var(--muted);
}
.form__veld:focus {
  outline: none;
  border-color: var(--accent);
  /* Ring in plaats van een dikkere rand: dan verspringt het veld niet. */
  box-shadow: 0 0 0 3px var(--accent-50);
}
.form__veld--tekst {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}
select.form__veld {
  appearance: none;
  /* Eigen pijltje, want het systeempijltje wisselt per besturingssysteem. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236a7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* Keuzerondjes en vinkjes */
.form__radios {
  display: grid;
  gap: 9px;
  padding-top: 2px;
}
.form__radio,
.form__vinkje {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
}
.form__radio input,
.form__vinkje input {
  margin: 2px 0 0;
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  flex: none;
  cursor: pointer;
}

/* Het honeypot-veld. Niet `display:none`: een bot die let op verborgen velden
   slaat die over, en dan vangt de val niets meer. Zo staat het buiten beeld
   maar bestaat het gewoon. */
.form__pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__altcha {
  --altcha-border-width: 1px;
  --altcha-border-radius: var(--radius-btn);
  --altcha-color-border: var(--line);
  --altcha-max-width: 100%;
  max-width: 300px;
}

.form__knop {
  justify-self: start;
  margin-top: 4px;
  border: 0;
  cursor: pointer;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: var(--radius-btn);
  transition:
    background 0.15s ease,
    transform 0.06s ease;
}
.form__knop:hover {
  background: var(--accent-600);
}
.form__knop:active {
  transform: translateY(1px);
}

@media (max-width: 640px) {
  .form {
    padding: 20px 18px 22px;
    margin-inline: -4px;
  }
  .form__knop {
    /* Op een telefoon is een knop over de volle breedte makkelijker te raken. */
    justify-self: stretch;
    text-align: center;
  }
}

/* ==========================================================================
   21. Voorvertoning
   Een balk die je niet over het hoofd ziet: de pagina eronder is identiek aan
   de echte, dus zonder dit denk je dat je naar de live site kijkt.
   ========================================================================== */
.voorvertoning {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 20px;
  text-align: center;
}

/* ==========================================================================
   22. Zoeken
   Het veld staat binnen de navigatie, zodat het op mobiel meeschuift in het
   uitklapmenu in plaats van de balk uit elkaar te duwen.
   ========================================================================== */
.zoek {
  display: flex;
  align-items: center;
  gap: 6px;
}
.zoek__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.zoek__veld {
  font: inherit;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 7px 11px;
  min-width: 0;
  width: 100%;
}
.zoek__veld::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.zoek__veld:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.zoek__knop {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
}
.zoek--kop {
  max-width: 240px;
}

/* Op het zoekscherm zelf staat het veld groot bovenaan, op een lichte
   achtergrond in plaats van de donkere header. */
.zoek--groot {
  margin-top: 18px;
  max-width: 520px;
}
.zoek--groot .zoek__veld {
  color: var(--ink);
  background: #fff;
  border-color: var(--line);
  padding: 12px 14px;
  font-size: 16px;
}
.zoek--groot .zoek__veld::placeholder {
  color: var(--muted);
}
.zoek--groot .zoek__knop {
  width: auto;
  height: 46px;
  padding: 0 18px;
  font-weight: 700;
}

.zoek__telling {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 14px;
}
.zoek__lijst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
}
.zoek__item {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.zoek__link {
  font-weight: 700;
  font-size: 17px;
}
.zoek__soort {
  color: var(--muted);
  font-size: 13px;
  margin-left: 8px;
}
.zoek__lede {
  color: var(--muted);
  font-size: 14px;
  margin: 4px 0 0;
}

@media (max-width: 1023px) {
  .zoek--kop {
    max-width: none;
    width: 100%;
    margin-top: 6px;
  }
}

/* ══ 26. Ruitenwissers ════════════════════════════════════════
   Hub met kentekenzoeker, merk-, model- en gidspagina's. Hergebruikt
   .page__* voor de kop en .cmp* voor de tabellen; hier staat alleen wat
   die pagina's extra nodig hebben. */
.rw__inner {
  max-width: 860px;
}
.rw__antwoord {
  color: var(--ink);
  font-weight: 600;
}
.rw__meta {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}
.rw__blok {
  margin-top: 44px;
}
.rw__h2 {
  margin: 0 0 14px;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.rw__h3 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 24px 0 10px;
  font-weight: 700;
  font-size: 17px;
}
.rw__teller {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
.rw__sub {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
}
.rw__let {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--accent-50);
  border: 1px solid var(--accent-200);
  color: var(--accent-700);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.rw__nowrap {
  white-space: nowrap;
}
.rw__klein {
  font-size: 13px;
  color: var(--ink-3);
}
.rw__toelichting {
  margin: 10px 0 0;
}
.rw__link,
.rw__genlink {
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-200);
  text-underline-offset: 3px;
}
.rw__link:hover,
.rw__genlink:hover {
  color: var(--accent-700);
  text-decoration-color: currentColor;
}
.rw__samen {
  margin: 0;
  color: var(--ink-2);
}
.rw__samen strong {
  color: var(--ink);
}
.rw__noot {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-btn);
  background: var(--bg-tint);
  font-size: 14px;
  color: var(--ink-2);
}
.rw__gevonden {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-tile);
  background: var(--accent-50);
  border: 1px solid var(--accent-200);
  color: var(--ink);
}
.rw__gevonden a {
  display: inline-block;
  margin-top: 4px;
  font-weight: 700;
  color: var(--accent-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rw__rij--gevonden td {
  background: var(--accent-50);
}
.rw__uitleg p {
  color: var(--ink-2);
}
/* Een generatie is een uitklapblok: de nieuwe staan open, de oude dicht, zodat
   een Golf met twaalf generaties niet eindeloos doorscrollt. */
.rw__gen-blok {
  margin-top: 36px;
  scroll-margin-top: 80px;
}
.rw__gen-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 12px;
  cursor: pointer;
  list-style: none;
}
.rw__gen-kop::-webkit-details-marker {
  display: none;
}
.rw__gen-kop .rw__h2 {
  margin: 0;
}
.rw__gen-kop .rw__h2::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  color: var(--accent);
  transition: transform 0.15s ease;
}
.rw__gen-blok[open] > .rw__gen-kop .rw__h2::before {
  transform: rotate(90deg);
}
.rw__jaren {
  font-weight: 600;
  color: var(--ink-3);
}
.rw__samenvatting {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
.rw__gen-blok[open] .rw__samenvatting {
  display: none;
}
/* Knop: "Bekijk" groot, de winkel klein eronder. */
.rw__cta {
  color: #fff;
  flex-direction: column;
  gap: 1px;
  min-width: 92px;
  padding-block: 7px;
  line-height: 1.15;
}
.rw__cta:hover {
  color: #fff;
}
.rw__ctawinkel {
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.9;
}
.rw .cmp__badge,
.rwh .cmp__badge {
  color: #fff;
}
.rw__stappen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 28px;
}
.rw__stappen .rw__h3 {
  margin-top: 0;
}
.rw__lijst {
  margin: 0;
  padding-left: 20px;
  color: var(--ink-2);
}
.rw__lijst li + li {
  margin-top: 6px;
}
.rw__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rw__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.15s ease;
}
.rw__chip:hover {
  border-color: var(--accent);
}
.rw__chipaantal {
  font-size: 12px;
  color: var(--ink-3);
}
.rw__werkwijze p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
}
.rw__artikel h2 {
  margin-top: 32px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* De kentekenzoeker. Het invoerveld is een Nederlands kenteken: geel, met de
   blauwe EU-strook. Dat herkent iedereen zonder uitleg. */
.rwz {
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg-soft);
  scroll-margin-top: 90px;
}
.rwz__label {
  display: block;
  margin-bottom: 10px;
  font-weight: 800;
  font-size: 16px;
}
.rwz__rij {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rwz__plaat {
  display: flex;
  flex: 1 1 220px;
  max-width: 340px;
  border: 2px solid #14171c;
  border-radius: 8px;
  overflow: hidden;
  background: #f7c600;
}
.rwz__plaat:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.rwz__nl {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 34px;
  padding-bottom: 6px;
  background: #1f4fa3;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.rwz__invoer {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: #14171c;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rwz__invoer::placeholder {
  color: rgba(20, 23, 28, 0.35);
}
.rwz__invoer:focus {
  outline: none;
}
.rwz__knop {
  flex: 0 0 auto;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.rwz__knop:hover {
  background: var(--accent-600);
}
.rwz__uitleg {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}
.rwz__melding {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-btn);
  background: #fff4f1;
  border: 1px solid #f3c6bb;
  color: var(--urgent-ink);
  font-size: 14px;
  font-weight: 600;
}
.rwz--groot {
  padding: 24px;
  background: #fff;
  box-shadow: var(--shadow-pop);
}
.rwz--groot .rwz__plaat {
  max-width: 400px;
}
.rwz--groot .rwz__invoer {
  font-size: 30px;
  padding-block: 12px;
}
.rwz--groot .rwz__knop {
  font-size: 16px;
  padding-inline: 26px;
}

/* De hub. */
.rwh__kop {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.rwh__kop-in {
  max-width: 860px;
  padding-block: 28px 44px;
}
.rwh__h1 {
  margin: 20px 0 0;
  font-weight: 800;
  font-size: clamp(32px, 5.5vw, 50px);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.rwh__lede {
  margin: 14px 0 26px;
  max-width: 640px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-2);
}
.rwh__in {
  padding-block: 8px 80px;
}
.rwh__blok {
  margin-top: 48px;
}
.rwh__smal {
  max-width: 860px;
}
.rwh__blokkop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
}
.rwh__kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rwh__kaart {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rwh__kaart:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}
.rwh__merk {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-700);
}
.rwh__model {
  font-weight: 800;
  font-size: 19px;
}
.rwh__maat {
  margin-top: 8px;
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.rwh__drie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 28px;
}
.rwh__drie p {
  margin: 0;
  color: var(--ink-2);
}
.rwh__drie .rw__h3 {
  margin-top: 8px;
}
.rwh__gidsen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rwh__gids {
  display: block;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  transition: border-color 0.15s ease;
}
.rwh__gids:hover {
  border-color: var(--accent);
}
.rwh__gidstitel {
  font-weight: 800;
}
@media (max-width: 640px) {
  .rwz__knop {
    width: 100%;
  }
  .rwz__plaat {
    max-width: none;
  }
}

/* Knop naar boven op de lange wisserpagina's. */
.rw-boven {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-pop);
  transition: background 0.15s ease, transform 0.15s ease;
}
.rw-boven:hover {
  background: var(--accent-600);
  transform: translateY(-2px);
}
.rw-boven:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .rw-boven {
    right: 14px;
    bottom: 14px;
    width: 44px;
    height: 44px;
  }
}
.rw-boven[hidden] {
  display: none;
}

/* Compacte zoeker in de hero van de homepage: geen kader, kleiner kenteken. */
.rwz--compact {
  margin-top: 28px;
  padding: 0;
  border: 0;
  background: transparent;
}
.rwz--compact .rwz__label {
  font-size: 15px;
}
.rwz--compact .rwz__plaat {
  flex-basis: 180px;
  max-width: 230px;
}
.rwz--compact .rwz__invoer {
  font-size: 19px;
  padding-block: 8px;
}
.rwz--compact .rwz__knop {
  padding: 10px 16px;
  font-size: 14px;
}
.rwz--compact .rwz__uitleg a {
  font-weight: 700;
  color: var(--accent-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Kentekenzoeker, bijgesteld: zwarte knop (alle varianten), en de grote zoeker
   op /ruitenwissers gecentreerd met een plaat in de verhouding van een echt
   kenteken in plaats van over de halve breedte. */
.rwz__rij {
  align-items: stretch;
}
.rwz__knop {
  background: var(--ink);
  color: #fff;
}
.rwz__knop:hover {
  background: #2a2f37;
}
.rwz__knop:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.rwz--groot {
  text-align: center;
}
.rwz--groot .rwz__rij {
  justify-content: center;
}
.rwz--groot .rwz__plaat {
  flex: 0 1 300px;
  max-width: 300px;
}
.rwz--groot .rwz__invoer {
  text-align: center;
  padding-inline: 10px 14px;
}
@media (max-width: 640px) {
  .rwz--groot .rwz__plaat {
    flex-basis: 100%;
    max-width: none;
  }
}
/* Tekst in het kenteken altijd in het midden, zoals op een echte plaat. */
.rwz__invoer {
  text-align: center;
}
/* Hoofdknop in de hero met witte tekst, in lijn met de knoppen op de
   wisserpagina's. Elders blijft de donkere inkt staan (zie .btn--primary). */
.hero .btn--primary,
.hero .btn--primary:hover {
  color: #fff;
}

/* Header: categorieën | scheiding | Koopgidsen · Ruitenwissers zoeken.
   De wisserzoeker is een hulpmiddel, geen categorie: een omrande knop met een
   klein kenteken ervoor, zodat hij er ook niet als categorie uitziet. */
.hd__scheiding {
  width: 1px;
  height: 22px;
  margin: 0 -8px;
  background: var(--line-dark);
}
.hd__link--tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 11px;
  border: 1px solid #3a3f48;
  border-radius: 999px;
  color: #fff;
}
.hd__link--tool:hover,
.hd__link--tool.is-active {
  border-color: var(--accent);
  color: #fff;
}
.hd__plaatje {
  display: inline-flex;
  flex: none;
  width: 22px;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  background: #f7c600;
}
.hd__plaatje::before {
  content: '';
  width: 6px;
  background: #1f4fa3;
}
/* Het uitklapmenu neemt het onder 1024px over (zie hierboven). Tot 1180px is
   de balk iets compacter: minder
   ruimte tussen de links, een kortere knoptekst en een smaller zoekveld. */
@media (min-width: 1024px) and (max-width: 1180px) {
  .hd__nav {
    gap: 16px;
  }
  .hd__scheiding {
    margin: 0 -4px;
  }
  .hd__lang {
    display: none;
  }
  .zoek--kop {
    max-width: 170px;
  }
}
@media (max-width: 1023px) {
  .hd__scheiding {
    display: none;
  }
  .hd__link--tool {
    padding: 12px 4px;
    border: 0;
    border-bottom: 1px solid var(--line-dark);
    border-radius: 0;
  }
}
/* De knoptekst is één geheel ("Ruitenwissers zoeken"): geen flex-gat tussen de
   woorden, alleen ruimte na het kentekentje. */
.hd__link--tool {
  gap: 0;
}
.hd__plaatje {
  margin-right: 8px;
}
/* Het zoekveld krimpt anders tot een smal vakje zodra het krap wordt. */
@media (min-width: 1024px) {
  .zoek--kop {
    flex: 0 1 220px;
    min-width: 150px;
  }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .zoek--kop {
    flex-basis: 150px;
  }
}

/* Beeldmerk (speld met auto) in header en footer. Een afbeelding met eigen
   vorm en kleur, dus zonder het oranje vlak van het oude icoon. */
.hd__beeldmerk,
.ft__beeldmerk {
  display: block;
  flex: none;
  object-fit: contain;
}
.hd__beeldmerk {
  width: 34px;
  height: 34px;
}
.ft__beeldmerk {
  width: 30px;
  height: 30px;
}
.author__avatar img{display:block;width:30px;height:30px;object-fit:contain}

/* Koopgidsen-uitklapmenu. De rubrieken stonden eerst los in de balk; dat waren
   er te veel om netjes te passen, en ze zijn ook gewoon onderdeel van de
   koopgidsen. Op de computer opent het paneel bij aanwijzen of klikken. */
.hd__drop {
  position: relative;
}
.hd__link--drop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
}
.hd__link--drop:hover,
.hd__link--drop.is-active {
  color: var(--accent);
}
.hd__pijl {
  transition: transform 0.15s ease;
}
.hd__paneel {
  display: none;
}
.hd__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .hd__drop:hover .hd__paneel,
  .hd__drop:focus-within .hd__paneel,
  .hd__drop.is-open .hd__paneel {
    display: grid;
  }
  .hd__drop:hover .hd__pijl,
  .hd__drop.is-open .hd__pijl {
    transform: rotate(180deg);
  }
  /* Onzichtbare brug tussen knop en paneel, zodat het paneel niet dichtklapt
     als de muis het gat oversteekt. */
  .hd__drop::after {
    content: '';
    position: absolute;
    left: -12px;
    right: -12px;
    top: 100%;
    height: 22px;
  }
  .hd__paneel {
    position: absolute;
    top: calc(100% + 18px);
    left: -18px;
    z-index: 60;
    min-width: 230px;
    padding: 8px;
    gap: 2px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  }
  .hd__sub {
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ink);
  }
  .hd__sub:hover,
  .hd__sub.is-active {
    background: var(--bg-tint);
    color: var(--accent);
  }
  .hd__sub--alle {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 8px 8px;
    font-weight: 700;
  }
}
/* In het mobiele menu staat alles gewoon onder elkaar: "Koopgidsen" wordt een
   kopje met de rubrieken eronder, zonder uitklappen. */
@media (max-width: 1023px) {
  .hd__link--drop {
    width: 100%;
    padding: 14px 4px 6px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-dark-soft);
    pointer-events: none;
  }
  .hd__pijl {
    display: none;
  }
  .hd__paneel {
    display: grid;
    border-bottom: 1px solid var(--line-dark);
    padding-bottom: 6px;
  }
  .hd__sub {
    padding: 10px 4px 10px 12px;
    font-size: 16px;
    color: #fff;
  }
  .hd__sub:hover,
  .hd__sub.is-active {
    color: var(--accent);
  }
}
/* Links direct na het logo, het zoekveld rechts: zo leest de balk als één
   rij van links naar rechts in plaats van alles rechts op een kluitje. */
@media (min-width: 1024px) {
  .hd__nav {
    flex: 1;
    margin-left: 18px;
  }
  .zoek--kop {
    margin-left: auto;
  }
}
/* Zoekicoon in de balk; het zoekveld zelf staat op /zoeken. */
.hd__zoek {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  color: #fff;
  transition: background 0.15s ease, color 0.15s ease;
}
.hd__zoek:hover,
.hd__zoek.is-active {
  background: var(--dark-chip);
  color: var(--accent);
}
@media (max-width: 1023px) {
  .hd__inner {
    gap: 6px;
  }
  .hd__brand {
    margin-right: auto;
  }
}
/* Zonder zoekveld in de balk is er ook op 1024px ruimte voor de volle tekst. */
@media (min-width: 1024px) {
  .hd__lang {
    display: inline;
  }
}
/* Menu-items in het midden van de balk: logo links, zoekicoon rechts en de
   links precies in het midden van de pagina, ongeacht hoe breed het logo is. */
@media (min-width: 1024px) {
  .hd__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .hd__brand {
    justify-self: start;
  }
  .hd__nav {
    margin-left: 0;
  }
  .hd__zoek {
    justify-self: end;
  }
}

/* Tabellen in artikeltekst (uit de editor). Zelfde stijl als de
   vergelijkingstabel; op een smal scherm scrollt de tabel zelf opzij in plaats
   van de pagina te verbreden. */
.prose table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 22px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.45;
}
.prose table p {
  margin: 0;
}
.prose th,
.prose td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line);
  min-width: 120px;
}
.prose tr:first-child th {
  border-top: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-tint);
}
.prose td:first-child {
  font-weight: 700;
  color: var(--ink);
}

/* Coverbeeld bovenaan een artikel, onder de kop. */
.art__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 26px 0 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bg-tint);
}