/* ============================================
   Genummerde stappen (component stappen): raster van vier witte kaarten met groot vaag cijfer rechtsboven.
   Eén widget in het origineel (steps-grid, proc-grid, gads-steps-grid, ww, sc-grid); de varianten verschillen
   alleen in tekstmaat, regelhoogte, kleur, breekpunten en hover.
   ============================================ */
.stappen-raster {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  width: 100%; margin: 0; padding: 0; list-style: none;
  font-family: var(--font-ui);
}
.stappen-raster__stap {
  position: relative; overflow: hidden; min-width: 0;
  padding: 32px 24px; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 12px;
  background: var(--color-white);
}
.stappen-raster__nr {
  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);
}
.stappen-raster__stip { display: block; width: 8px; height: 8px; margin-bottom: 18px; border-radius: 50%; background: var(--color-accent); }
.stappen-raster__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);
}
.stappen-raster__tekst {
  position: relative; margin: 0;
  font-family: var(--font-ui); font-size: var(--tekst-maat, 16px); font-weight: 500; line-height: var(--tekst-lh, 1.65);
  color: var(--tekst-kleur, #888);
}

/* Standaard (lokale SEO, Google Ads): 16px, regelhoogte 1.65 */
.stappen-raster--ruim { --tekst-lh: 1.7; }                               /* website laten maken */
.stappen-raster--klein { --tekst-maat: 14px; --tekst-lh: 1.7; }         /* branchepagina vakman */
.stappen-raster--klein-dicht { --tekst-maat: 14px; }                    /* review management */
.stappen-raster--breed { font-family: inherit; --tekst-maat: 15px; --tekst-kleur: #666; } /* leadgeneratie, vakmanpagina's */

/* Hover */
.stappen-raster--hover-rand .stappen-raster__stap { cursor: default; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.stappen-raster--hover-licht .stappen-raster__stap { transition: transform 0.25s, box-shadow 0.25s; }
@media (hover: hover) {
  .stappen-raster--hover-rand .stappen-raster__stap:hover { transform: translateY(-6px); box-shadow: rgba(0, 0, 0, 0.1) 0 16px 40px; border-color: var(--color-accent); }
  .stappen-raster--hover-licht .stappen-raster__stap:hover { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.07) 0 10px 28px; }
}

/* Breekpunten van de widget: 768 → twee kolommen, 480 → één (sc-grid: 900 en 600) */
@media (max-width: 900px) {
  .stappen-raster--breed { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .stappen-raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .stappen-raster--breed { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .stappen-raster { grid-template-columns: 1fr; }
}