/* manege-bak: welke eerste les past bij jou.
   Zandvloer: React Bits Pro dither-wave (origineel gecompileerd). Spoor: React Bits Pro ribbon-trail
   (origineel gecompileerd, ghost-functie gepatcht naar de rijfiguur). Originele component-CSS hieronder gescoped. */

/* Origineel: components/react-bits/dither-wave.css */
.msm-manege-bak .dither-wave-container {
  position: relative;
  overflow: hidden;
}
.msm-manege-bak .dither-wave-children {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* Origineel: components/react-bits/ribbon-trail.css */
.msm-manege-bak .ribbon-trail {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
}

.msm-manege-bak {
  --bk-primary: var(--m-primary, #a55436);
  --bk-bg: var(--m-bg, #e9e3d7);
  --bk-ink: var(--m-ink, #293126);
  --bk-surface: var(--m-surface, #faf7ef);
  --bk-muted: var(--m-muted, #667061);
  --bk-sand: var(--m-accent2, #b99b6b);
  --bk-line: var(--m-line, #d5cdbd);
  --bk-display: var(--m-font-display, "Fraunces", Georgia, serif);
  --bk-body: var(--m-font-body, "Source Sans 3", Arial, sans-serif);
  position: relative;
  scroll-margin-top: 112px;
  padding: clamp(64px, 9vw, 120px) 0;
  background: var(--bk-bg);
  color: var(--bk-ink);
  font-family: var(--bk-body);
}
.msm-manege-bak *,
.msm-manege-bak *::before,
.msm-manege-bak *::after {
  box-sizing: border-box;
}
.msm-manege-bak .bk-wrap {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}

/* Kop */
.msm-manege-bak .bk-head {
  max-width: 720px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.msm-manege-bak .bk-head.bk-pre {
  opacity: 0;
}
.msm-manege-bak .bk-kicker {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bk-primary);
}
.msm-manege-bak .bk-title {
  margin: 0;
  font-family: var(--bk-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.msm-manege-bak .bk-intro {
  margin: 16px 0 0;
  max-width: 56ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--bk-muted);
}

/* Raster */
.msm-manege-bak .bk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "quiz" "arena" "result";
  gap: clamp(28px, 4vw, 48px);
}
.msm-manege-bak .bk-quiz { grid-area: quiz; }
.msm-manege-bak .bk-arena { grid-area: arena; }
.msm-manege-bak .bk-result { grid-area: result; }
@media (min-width: 900px) {
  .msm-manege-bak .bk-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    grid-template-areas: "quiz arena" "result arena";
    grid-template-rows: auto 1fr;
    column-gap: clamp(40px, 6vw, 88px);
    align-items: start;
  }
}

/* Vragen */
.msm-manege-bak .bk-quiz {
  display: none;
}
.msm-manege-bak.is-ready .bk-quiz {
  display: grid;
  gap: 24px;
}
.msm-manege-bak .bk-q-label {
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 1rem;
}
.msm-manege-bak .bk-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.msm-manege-bak .bk-opt {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--bk-line);
  border-radius: 999px;
  background: var(--bk-surface);
  color: var(--bk-ink);
  font: inherit;
  font-size: 0.9875rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.msm-manege-bak .bk-opt:hover {
  border-color: var(--bk-ink);
}
.msm-manege-bak .bk-opt[aria-pressed="true"] {
  background: var(--bk-ink);
  border-color: var(--bk-ink);
  color: var(--bk-surface);
}
.msm-manege-bak .bk-opt:focus-visible,
.msm-manege-bak .bk-cta:focus-visible,
.msm-manege-bak .bk-all a:focus-visible {
  outline: 2px solid var(--bk-primary);
  outline-offset: 3px;
}

/* De bak */
.msm-manege-bak .bk-arena {
  margin: 0;
}
.msm-manege-bak .bk-stage {
  position: relative;
  width: min(78%, 300px);
  aspect-ratio: 28 / 50;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: color-mix(in srgb, var(--bk-bg) 70%, var(--bk-surface));
  border: 1px solid var(--bk-line);
  touch-action: pan-y;
}
@media (min-width: 900px) {
  .msm-manege-bak .bk-stage {
    width: 100%;
  }
  .msm-manege-bak .bk-arena {
    position: sticky;
    top: 104px;
  }
}
.msm-manege-bak .bk-sand {
  position: absolute;
  left: 14.2857%;
  top: 8%;
  width: 71.4286%;
  height: 80%;
  overflow: hidden;
  z-index: 0;
}
.msm-manege-bak .bk-sand .dither-wave-container {
  position: absolute;
  inset: 0;
}
.msm-manege-bak .bk-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}
.msm-manege-bak .bk-ribbon {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.msm-manege-bak .bk-ribbon .ribbon-trail {
  min-height: 0;
}
.msm-manege-bak .bk-lane {
  fill: color-mix(in srgb, var(--bk-sand) 38%, var(--bk-bg));
}
.msm-manege-bak .bk-sand-fill {
  fill: color-mix(in srgb, var(--bk-sand) 55%, var(--bk-bg));
  transition: fill-opacity 0.6s;
}
.msm-manege-bak.is-dither .bk-sand-fill {
  fill-opacity: 0;
}
.msm-manege-bak .bk-track {
  fill: none;
  stroke: color-mix(in srgb, var(--bk-sand) 62%, var(--bk-ink));
  stroke-opacity: 0.22;
  stroke-width: 1.2;
}
.msm-manege-bak .bk-fence {
  fill: none;
  stroke: color-mix(in srgb, var(--bk-ink) 72%, var(--bk-sand));
  stroke-width: 0.16;
  stroke-linecap: square;
}
.msm-manege-bak .bk-fence-in {
  stroke-opacity: 0.55;
  stroke-width: 0.1;
}
.msm-manege-bak .bk-gate {
  stroke: color-mix(in srgb, var(--bk-ink) 72%, var(--bk-sand));
  stroke-width: 0.22;
  stroke-linecap: round;
}
.msm-manege-bak .bk-posts rect {
  fill: var(--bk-ink);
}
.msm-manege-bak .bk-letter rect {
  fill: var(--bk-surface);
  stroke: var(--bk-line);
  stroke-width: 0.08;
}
.msm-manege-bak .bk-letter text {
  font-family: var(--bk-display);
  font-size: 1.1px;
  font-weight: 600;
  text-anchor: middle;
  fill: var(--bk-ink);
}
.msm-manege-bak .bk-guide {
  fill: none;
  stroke: var(--bk-ink);
  stroke-opacity: 0.32;
  stroke-width: 0.14;
  stroke-dasharray: 0.55 0.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.msm-manege-bak .bk-line {
  fill: none;
  stroke: var(--bk-primary);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.3s;
}
.msm-manege-bak:not(.is-ribbon) .bk-line {
  opacity: 0.92;
}
.msm-manege-bak .bk-caption {
  display: grid;
  gap: 4px;
  margin: 16px auto 0;
  width: min(100%, 400px);
  text-align: center;
}
.msm-manege-bak .bk-figure-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bk-muted);
}
.msm-manege-bak .bk-figure {
  font-family: var(--bk-display);
  font-size: 1.125rem;
  line-height: 1.3;
}
.msm-manege-bak.is-static .bk-hint {
  display: none;
}
.msm-manege-bak .bk-hint {
  margin-top: 6px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--bk-muted);
}

/* Uitkomst */
.msm-manege-bak .bk-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--bk-line);
  border-radius: 20px;
  background: var(--bk-surface);
}
@media (min-width: 560px) {
  .msm-manege-bak .bk-result {
    grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1.2fr);
  }
}
.msm-manege-bak .bk-result-media {
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 28px);
  background: color-mix(in srgb, var(--bk-bg) 60%, var(--bk-surface));
}
.msm-manege-bak .bk-result-media img {
  display: block;
  width: 100%;
  max-width: min(260px, 50vw);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.msm-manege-bak .bk-result-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(20px, 3vw, 32px);
}
.msm-manege-bak .bk-result-kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bk-primary);
}
.msm-manege-bak .bk-result-title {
  margin: 0;
  font-family: var(--bk-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  line-height: 1.15;
}
.msm-manege-bak .bk-result-text {
  margin: 0;
  line-height: 1.6;
  color: var(--bk-muted);
}
.msm-manege-bak .bk-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 6px 0 4px;
}
.msm-manege-bak .bk-facts dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bk-muted);
}
.msm-manege-bak .bk-facts dd {
  margin: 2px 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.msm-manege-bak .bk-voorbeeld {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--bk-muted);
}
.msm-manege-bak .bk-cta {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  margin-top: 6px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--bk-primary);
  color: var(--bk-surface);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s;
}
.msm-manege-bak .bk-cta:hover {
  background: color-mix(in srgb, var(--bk-primary) 86%, var(--bk-ink));
}

/* Zonder JavaScript: de zes uitkomsten als lijst */
.msm-manege-bak .bk-all {
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: 28px;
  border-top: 1px solid var(--bk-line);
}
.msm-manege-bak.is-ready .bk-all {
  display: none;
}
.msm-manege-bak .bk-all-title {
  margin: 0 0 14px;
  font-family: var(--bk-display);
  font-weight: 500;
  font-size: 1.5rem;
}
.msm-manege-bak .bk-all-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 1.25em;
  line-height: 1.6;
}
.msm-manege-bak .bk-all-note {
  margin: 16px 0 0;
  color: var(--bk-muted);
}
.msm-manege-bak .bk-all a {
  color: var(--bk-primary);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .msm-manege-bak .bk-opt,
  .msm-manege-bak .bk-cta,
  .msm-manege-bak .bk-line,
  .msm-manege-bak .bk-sand-fill {
    transition: none;
  }
  .msm-manege-bak .bk-head.bk-pre {
    opacity: 1;
  }
}