/* bandenservice-werkbon 1.0.0 · voorbeeldreacties als werkbonnen op een puntenveld met een lens die
   de cursor volgt (ReactBits DotField) en een kop die met het scrollen scherp wordt (ReactBits
   ScrollReveal). Het puntenveld is een functionele achtergrond, geen versiering vóór tekst.
   Kleuren en fonts alleen via --m-*-tokens. */
.msm-bandenservice-werkbon {
  --wb-ink: var(--m-ink, #171916);
  --wb-paper: var(--m-bg, #f3f0e8);
  --wb-lime: var(--m-primary, #d7ff3f);
  --wb-line: color-mix(in srgb, var(--m-ink, #171916) 26%, transparent);
  --wb-muted: color-mix(in srgb, var(--m-ink, #171916) 66%, transparent);
  --wb-display: var(--m-font-display, Arial, Helvetica, sans-serif);
  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
  scroll-margin-top: 110px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--m-bg, #f3f0e8) 20%, transparent) 1.5px, transparent 2px) 0 0 / 17px 17px,
    var(--wb-ink);
  color: var(--wb-paper);
  font: 400 16px/1.55 var(--m-font-body, Arial, Helvetica, sans-serif);
  padding: clamp(72px, 9vw, 136px) max(16px, 3vw) clamp(80px, 10vw, 150px);
}
.msm-bandenservice-werkbon[data-ready] { background: var(--wb-ink); }
.msm-bandenservice-werkbon *,
.msm-bandenservice-werkbon *::before,
.msm-bandenservice-werkbon *::after { box-sizing: border-box; }
.msm-bandenservice-werkbon .wb-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.msm-bandenservice-werkbon .wb-wrap {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
.msm-bandenservice-werkbon .wb-head { position: sticky; top: 40px; }
.msm-bandenservice-werkbon .wb-eyebrow {
  margin: 0 0 18px;
  color: var(--wb-lime);
  font: 700 10px/1.2 var(--wb-display);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.msm-bandenservice-werkbon .wb-title {
  margin: 0 0 22px;
  font: 900 clamp(36px, 4.4vw, 64px)/.98 var(--wb-display);
  letter-spacing: -.055em;
  transform-origin: 0% 50%;
}
.msm-bandenservice-werkbon .wb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.msm-bandenservice-werkbon .wb-word,
.msm-bandenservice-werkbon .wb-piece { display: inline-block; }
.msm-bandenservice-werkbon .wb-intro { margin: 0; max-width: 40ch; color: color-mix(in srgb, var(--m-bg, #f3f0e8) 78%, transparent); font-size: 15px; }

/* Werkbonnen: papier met een gekartelde bovenrand, licht scheef zoals losse bonnen. */
.msm-bandenservice-werkbon .wb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 40px) clamp(16px, 2.2vw, 28px);
}
.msm-bandenservice-werkbon .wb-list > li { min-width: 0; }
.msm-bandenservice-werkbon .wb-list > li:nth-child(even) { margin-top: clamp(0px, 5vw, 64px); }
.msm-bandenservice-werkbon .wb-bon {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
  background: var(--wb-paper);
  color: var(--wb-ink);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .38);
  transform: rotate(-.7deg);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.msm-bandenservice-werkbon .wb-list > li:nth-child(even) .wb-bon { transform: rotate(.9deg); }
.msm-bandenservice-werkbon .wb-list > li:nth-child(3) .wb-bon { transform: rotate(.5deg); }
.msm-bandenservice-werkbon .wb-bon:hover { transform: rotate(0) translateY(-4px); }
.msm-bandenservice-werkbon .wb-bon::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
  background:
    linear-gradient(to top right, var(--wb-paper) 50%, transparent 50%) 0 0 / 14px 8px repeat-x,
    linear-gradient(to top left, var(--wb-paper) 50%, transparent 50%) 0 0 / 14px 8px repeat-x;
}
.msm-bandenservice-werkbon .wb-bon-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1.5px dashed var(--wb-line);
  font: 700 10px/1 var(--wb-display);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.msm-bandenservice-werkbon .wb-label { padding: 5px 7px; background: var(--wb-ink); color: var(--wb-lime); letter-spacing: .14em; }
.msm-bandenservice-werkbon .wb-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.msm-bandenservice-werkbon .wb-meta dt { margin: 0 0 3px; color: var(--wb-muted); font: 700 9px/1.2 var(--wb-display); letter-spacing: .16em; text-transform: uppercase; }
.msm-bandenservice-werkbon .wb-meta dd { margin: 0; font-weight: 700; font-size: 14px; line-height: 1.3; }
.msm-bandenservice-werkbon .wb-quote { flex: 1; margin: 18px 0 16px; }
.msm-bandenservice-werkbon .wb-quote p {
  margin: 0;
  font: 700 clamp(16px, 1.45vw, 19px)/1.38 var(--wb-display);
  letter-spacing: -.015em;
}
.msm-bandenservice-werkbon .wb-who {
  margin: 0;
  padding-top: 12px;
  border-top: 1.5px dashed var(--wb-line);
  color: var(--wb-muted);
  font-size: 13px;
}

@media (max-width: 960px) {
  .msm-bandenservice-werkbon .wb-wrap { grid-template-columns: 1fr; }
  .msm-bandenservice-werkbon .wb-head { position: static; }
}
@media (max-width: 640px) {
  .msm-bandenservice-werkbon { scroll-margin-top: 96px; }
  .msm-bandenservice-werkbon .wb-list { grid-template-columns: 1fr; gap: 34px; }
  .msm-bandenservice-werkbon .wb-list > li:nth-child(even) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-bandenservice-werkbon .wb-bon,
  .msm-bandenservice-werkbon .wb-list > li:nth-child(even) .wb-bon,
  .msm-bandenservice-werkbon .wb-list > li:nth-child(3) .wb-bon,
  .msm-bandenservice-werkbon .wb-bon:hover { transition: none; transform: none; }
}