/* ============================================
   Werkwijze met tabs (widget "ww") — waarden uit de eigen widget-CSS van het origineel.
   ============================================ */
.werkwijze { font-family: var(--font-ui); }
.werkwijze__tabs { display: flex; gap: 4px; width: fit-content; margin-bottom: 40px; padding: 4px; border-radius: 10px; background: var(--color-light); }
.werkwijze__tab {
  padding: 11px 26px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-grey);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.2s;
}
.werkwijze__tab.is-active { background: var(--color-primary); color: var(--color-white); }
@media (hover: hover) { .werkwijze__tab:hover:not(.is-active) { color: var(--color-text); } }
.werkwijze__panel[hidden] { display: none; }
.werkwijze__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.werkwijze__kaart { position: relative; overflow: hidden; padding: 32px 24px; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 12px; background: var(--color-cream); }
.werkwijze__num { position: absolute; top: 8px; right: 14px; font-family: var(--font-heading); font-size: 80px; font-weight: 900; line-height: 1; color: rgba(0, 0, 0, 0.05); }
.werkwijze__dot { display: block; width: 8px; height: 8px; margin-bottom: 18px; border-radius: 50%; background: var(--color-accent); }
.werkwijze__titel { position: relative; margin: 0 0 10px; font-family: var(--font-heading); font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--color-primary); }
.werkwijze__tekst { position: relative; margin: 0; font-size: 16px; line-height: 1.7; color: var(--color-grey); }

@media (max-width: 768px) {
  .werkwijze__grid { grid-template-columns: 1fr 1fr; }
  .werkwijze__tabs { flex-direction: column; width: 100%; }
  .werkwijze__tab { text-align: left; }
}
@media (max-width: 480px) {
  .werkwijze__grid { grid-template-columns: 1fr; }
}