/* Pagina 'Werkwijze' */
.werkwijze { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.werkwijze h2 { scroll-margin-top: 1rem; }
.werkwijze section { scroll-margin-top: 1rem; }
.werkwijze p { max-width: 46rem; }
.inhoud { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.inhoud a { padding: 0.35rem 0.8rem; border: 1px solid var(--lijn); border-radius: 999px; background: var(--card); font-size: 0.875rem; text-decoration: none; }
.werkwijze .tabel-wrap { max-height: none; }
.bronnen-tabel { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: 0.875rem; }
.bronnen-tabel th, .bronnen-tabel td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; }
.bronnen-tabel thead th { border-bottom: 2px solid var(--inkt); }
.bronnen-tabel tbody th { width: 13rem; }
.bronnen-tabel small { display: block; font-weight: 400; color: var(--tekst2); font-size: var(--klein); }
.som { padding: 1rem 1.25rem; background: var(--card); border: 1px solid var(--lijn); border-radius: var(--radius); }
.som p { margin: 0 0 0.5rem; }
.som ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.som li { line-height: 1.45; }
.som .verschilt, .som .gelijk { margin-left: 0.5rem; padding: 0 0.45rem; border-radius: 999px; font-size: var(--klein); font-weight: 700; vertical-align: 0.1em; }
.som .verschilt { background: var(--tint-brand); color: var(--accent); }
.som .gelijk { background: var(--vlak); color: var(--tekst2); }
.regels { padding-left: 1.2rem; max-width: 46rem; }
.regels li { margin-bottom: 0.5rem; line-height: 1.5; }
.werkwijze .tabel-wrap { display: block !important; overflow-x: auto; margin-top: 0.75rem; }

/* smal scherm: elke tabelregel als blokje met kopjes */
@media (max-width: 40rem) {
  .werkwijze .tabel-wrap { overflow: visible; border: 0; background: none; }
  .bronnen-tabel, .werkwijze .soorten-tabel { min-width: 0; }
  .bronnen-tabel thead, .werkwijze .soorten-tabel thead { display: none; }
  .bronnen-tabel tr, .werkwijze .soorten-tabel tr { display: block; margin-bottom: 0.75rem; padding: 0.75rem 0.9rem; background: var(--card); border: 1px solid var(--lijn); border-radius: var(--radius); }
  .bronnen-tabel th, .bronnen-tabel td, .werkwijze .soorten-tabel th, .werkwijze .soorten-tabel td { display: block; width: auto; padding: 0.2rem 0; border: 0; }
  .bronnen-tabel tbody th, .werkwijze .soorten-tabel tbody th { padding-bottom: 0.35rem; font-size: 17px; color: var(--inkt); }
  .bronnen-tabel td::before, .werkwijze .soorten-tabel td::before { content: attr(data-kop) ": "; font-weight: 700; }
}

.in-label, .niet-label { display: inline-block; padding: 0 0.45rem; border-radius: 999px; font-size: var(--klein); font-weight: 700; }
.in-label { background: var(--tint-eerlijk); color: var(--eerlijk); }
.niet-label { background: var(--vlak); color: var(--tekst2); }
.leveranciers-tabel td:nth-child(3) { white-space: nowrap; }

.maand-tabel { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--lijn); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.maand-tabel th, .maand-tabel td { padding: 0.4rem 0.2rem; text-align: center; border-bottom: 1px solid var(--lijn); }
.maand-tabel thead th { border-bottom: 2px solid var(--inkt); font-size: var(--klein); }
@media (max-width: 40rem) { .maand-tabel { font-size: var(--klein); } .maand-tabel th, .maand-tabel td { padding: 0.3rem 0.05rem; } }