/* ============================================================================
   service.css: gedeeld door veilig-gedrag, ehs-rie en safety-checks
   De drie pagina's hebben hetzelfde sectieskelet (zie SECTIONS.md); alleen de
   inhoud verschilt. Wat hier staat geldt dus voor alle drie.
   ========================================================================== */

/* De fotohero met witte tekst eroverheen stond hier. De dienstpagina's dragen
   sinds 2 september 2026 dezelfde gesplitste hero als contact en over-ons
   (.paginahero in styleguide.css): kop op grijs links, foto rechts. De regels
   voor .service-hero staan nog wel in cases.css en cursus.css, want de case- en
   cursuspagina's gebruiken die hero nog. */

.hero--actions { margin-top: var(--space-700); display: flex; flex-wrap: wrap; gap: var(--space-300); }

/* ---- 03 Stappenplan als oplopende trap ----------------------------------
   Bij Veilig gedrag zijn dit de vijf treden van de Veiligheidsladder, bij de
   andere diensten drie stappen. Elke trede schuift een stukje verder in en
   staat op een eigen vlak, zodat de stijging zichtbaar is zonder tekening. */
.trap { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.trede {
  display: flex; gap: var(--space-500);
  padding: var(--space-panel) var(--inset-x);
  background-color: var(--color-white);
  margin-left: calc(var(--trede) * 6%);
  border-left: 4px solid var(--color-geel);
}
.trede:nth-child(even) { background-color: var(--color-grey); }
@media (max-width: 991px) {
  .trede { margin-left: 0; padding: var(--space-panel-md) var(--inset-x); }
}
@media (max-width: 576px) {
  .trede { flex-direction: column; gap: var(--space-300); padding: var(--space-panel-sm) var(--inset-x); }
}

.trede__nummer {
  flex-shrink: 0;
  font-family: var(--font-light); font-weight: var(--weight-light);
  font-size: 2rem; line-height: 1; color: var(--color-text-primary);
}
.trede__inhoud { display: flex; flex-direction: column; gap: var(--space-300); }
.trede__titel { font-size: clamp(1.25rem, 1rem + 1vw, 2rem); line-height: 1.1; }
.trede__tekst { font-family: var(--font-regular); font-weight: var(--weight-regular);
                font-size: 1rem; line-height: 1.5; margin: 0; }
.trede__gedrag { font-family: var(--font-regular); font-weight: var(--weight-regular);
                 font-size: 0.875rem; line-height: 1.5; margin: 0; }
.trede__gedrag span {
  display: block; margin-bottom: var(--space-100);
  font-family: var(--font-medium); font-weight: var(--weight-medium);
  font-size: 0.6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
}

/* ---- 04 Voordelen -------------------------------------------------------- */
.voordeel__icoon { color: var(--color-text-primary); fill: none; width: 24px; height: 24px; }
.voordeel__titel { font-size: 1.5rem; line-height: 1.1; }

/* ---- 06 Projecten -------------------------------------------------------
   Dezelfde caserijen als op de homepage: tekst links, beeld rechts, onder
   991px het beeld erboven (§6.9). */
.projectkaart__klant {
  font-family: var(--font-medium); font-weight: var(--weight-medium);
  font-size: 0.6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
  margin: 0;
}