/* =========================================================================
   27 Moments portaal — stijlen voor de module moodboard
   Eigen bestand per module zodat parallelle wijzigingen elkaar niet raken.

   Opbouw:
     1. Gedeelde bouwstenen (tegels, ronde knoppen, duimpjes)
     2. Startkeuze — twee wegen (E1)
     3. Weg 1: stijl per stijl, met groot sfeerbeeld (E2)
     4. Weg 2: beeld per beeld, swipen (E3)
     5. Resultaat: jullie look & feel (E4)
     6. Jullie moodboard (pins) + eigen beelden en Pinterest (E7)
     7. Lightbox
   Alles werkt vanaf 375 px breed; de knoppen die je vaak gebruikt zijn
   minstens 44 px hoog.
   ========================================================================= */

/* ==================== 1. Gedeelde bouwstenen ============================ */

.mb-rij {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(124px, 30vw, 168px);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.mb-rij > * { scroll-snap-align: start; }

/* Eén tegel = het beeld (bekijken/kiezen) plus een hoekknop. */
.mb-tegel { position: relative; }
.mb-tegel__beeld {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--m27-radius-kaart);
}
.mb-tegel__beeld img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--m27-radius-kaart);
  background: #efece6;
}
.mb-tegel__beeld:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }
.mb-tegel__beeld.actief img { outline: 3px solid var(--m27-paars); outline-offset: -3px; }
.mb-tegel__beeld.opbord img { outline: 3px solid var(--m27-donkergroen); outline-offset: -3px; }
.mb-tegel__tag {
  position: absolute;
  left: 6px;
  bottom: 6px;
  pointer-events: none;
  max-width: calc(100% - 50px);
}
.mb-tegel__tag .m27-tag { font-size: 9.5px; padding: 3px 8px; }

/* Enkel voor schermlezers (de melding na elk oordeel). */
.mb-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mb-hint { font-size: 12.5px; color: #6f6a63; margin-top: 12px; }

/* Ronde overlayknop op een beeld (loep, toevoegen). */
.mb-rond {
  position: absolute;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--m27-radius-pill);
  background: rgba(251, 251, 249, 0.94);
  color: var(--m27-donkergroen);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(47, 33, 64, 0.22);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.mb-rond svg { width: 16px; height: 16px; }
.mb-rond:hover { transform: translateY(-1px); }
.mb-rond:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }
.mb-rond--aan { background: var(--m27-donkergroen); color: var(--m27-wit); }
.mb-rond--rechtsboven { top: 6px; right: 6px; }
.mb-rond--linksboven { top: 6px; left: 6px; }

/* Duimpje: wat vonden jullie er eerder van? */
.mb-duim {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--m27-radius-pill);
  pointer-events: none;
  box-shadow: 0 3px 10px rgba(47, 33, 64, 0.25);
}
.mb-duim svg { width: 13px; height: 13px; }
.mb-duim--goed { background: var(--m27-lichtgroen); color: var(--m27-donkergroen); }
.mb-duim--niet { background: var(--m27-lila); color: var(--m27-tekst); }

/* Kop van een weg: titel links, wisselen rechts. */
.mb-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.mb-kop h3 { margin-bottom: 2px; }
.mb-kop__acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ==================== 2. Startkeuze (E1) ================================ */

.mb-keuzes {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  margin-top: 4px;
}
.mb-keuze {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px;
  border: 1.5px solid #e6e1d8;
  border-radius: var(--m27-radius-groot);
  background: var(--m27-wit);
  color: var(--m27-tekst);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.mb-keuze:hover {
  border-color: var(--m27-lila);
  box-shadow: 0 10px 26px rgba(47, 33, 64, 0.1);
  transform: translateY(-2px);
}
.mb-keuze:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 3px; }
.mb-keuze__body { display: block; }
.mb-keuze__titel {
  display: block;
  font-family: var(--m27-font-titel);
  letter-spacing: var(--m27-ls-titel);
  font-weight: 400;
  font-size: 17px;
  color: var(--m27-donkergroen);
}
.mb-keuze__tekst { display: block; font-size: 13.5px; color: #6f6a63; margin-top: 4px; line-height: 1.45; }
.mb-keuze__stap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 4px;
  font-size: var(--m27-fs-label);
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: var(--m27-paars);
}
.mb-keuze__stap svg { width: 15px; height: 15px; }

/* Collage: drie beelden die samen laten zien wat je te wachten staat.
   De hoogte komt van de aspect-ratio op de houder, zodat de twee rijen een
   vaste maat hebben en het grote beeld er netjes over spant. */
.mb-collage {
  display: grid;
  gap: 6px;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 3 / 2;
}
.mb-collage img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 12px;
  background: #efece6;
}
.mb-collage__groot { grid-row: span 2; }

/* Variant voor het swipen: gestapelde kaartjes. */
.mb-collage--stapel { display: block; position: relative; height: 148px; aspect-ratio: auto; }
/* Maat komt van de HOOGTE van de houder; op de breedte rekenen liet de
   kaartjes over de kaart erboven en eronder heen lopen. */
.mb-collage--stapel img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  aspect-ratio: 3 / 4;
  box-shadow: 0 8px 20px rgba(47, 33, 64, 0.18);
}
.mb-collage--stapel img:nth-child(1) { transform: translate(-96%, -50%) rotate(-10deg); }
.mb-collage--stapel img:nth-child(2) { transform: translate(-4%, -50%) rotate(9deg); }
.mb-collage--stapel img:nth-child(3) { transform: translate(-50%, -50%) rotate(-2deg); }

/* ==================== 3. Weg 1: stijl per stijl (E2) ==================== */

.mb-stijlnav { margin-bottom: 12px; }
.mb-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(131, 95, 165, 0.35) transparent;
}
.mb-chips::-webkit-scrollbar { height: 6px; }
.mb-chips::-webkit-scrollbar-thumb { background: rgba(131, 95, 165, 0.35); border-radius: 999px; }
.mb-chip {
  flex: none;
  min-height: 36px;
  padding: 8px 15px;
  border: 1.5px solid #e0dbd2;
  border-radius: var(--m27-radius-pill);
  background: var(--m27-wit);
  color: var(--m27-tekst);
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mb-chip:hover { border-color: var(--m27-lila); }
.mb-chip:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }
.mb-chip[aria-pressed="true"] {
  background: var(--m27-donkergroen);
  border-color: var(--m27-donkergroen);
  color: var(--m27-wit);
}

.mb-hero { position: relative; border-radius: var(--m27-radius-groot); overflow: hidden; background: #efece6; }
.mb-hero img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
/* Donkere voet onder het beeld: pas hiermee blijft het witte bijschrift
   leesbaar op een lichte foto. */
.mb-hero__waas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(30, 30, 29, 0.82), rgba(30, 30, 29, 0.45) 45%, transparent);
}
.mb-hero__voet {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.mb-hero__bijschrift {
  color: var(--m27-wit);
  font-size: 13px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  flex: 1 1 120px;
  min-width: 0;
}
.mb-hero__kies {
  flex: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--m27-radius-pill);
  background: var(--m27-wit);
  color: var(--m27-donkergroen);
  font-size: 12.5px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(47, 33, 64, 0.25);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mb-hero__kies svg { width: 17px; height: 17px; flex: none; }
.mb-hero__kies:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }
.mb-hero__kies.aan { background: var(--m27-donkergroen); color: var(--m27-wit); }
.mb-hero__pijl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--m27-radius-pill);
  background: rgba(251, 251, 249, 0.9);
  color: var(--m27-donkergroen);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(47, 33, 64, 0.2);
}
.mb-hero__pijl:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }
.mb-hero__vorige { left: 10px; }
.mb-hero__volgende { right: 10px; }
.mb-hero__teller {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 11px;
  border-radius: var(--m27-radius-pill);
  background: rgba(44, 44, 43, 0.55);
  color: var(--m27-wit);
  font-size: 11px;
  letter-spacing: var(--m27-ls-label);
}
.mb-stijl__naam {
  font-family: var(--m27-font-titel);
  letter-spacing: var(--m27-ls-titel);
  font-weight: 400;
  font-size: 18px;
  color: var(--m27-donkergroen);
}
.mb-stijl__sub { font-size: 13.5px; color: #7c776f; margin: 6px 0 10px; }
.mb-stijl__voet {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

@media (max-width: 560px) {
  /* Bijschrift op zijn eigen regel, knop eronder: op een telefoon botsen
     die twee anders in elkaar. */
  .mb-hero__bijschrift { flex: 1 1 100%; }
  .mb-hero__kies { width: 100%; justify-content: center; }
}

@media (min-width: 768px) {
  /* Breed beeld, maar nooit hoger dan een halve schermhoogte: anders vult
     één stijlbeeld het hele venster. */
  .mb-hero img { aspect-ratio: 16 / 9; max-height: min(58vh, 520px); }
  .mb-rij { grid-auto-columns: clamp(150px, 18vw, 190px); }
}

/* ==================== 4. Weg 2: swipen (E3) ============================= */

/* De wegvliegende kaart schuift 130% naar opzij; zonder deze clip kan de
   pagina zelf horizontaal meescrollen op een telefoon. */
.mb-swipe { display: block; overflow: hidden; }
.mb-stapel {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  max-height: 56vh;
  touch-action: pan-y;
}
.mb-swipekaart {
  position: absolute;
  inset: 0;
  border-radius: var(--m27-radius-groot);
  overflow: hidden;
  background: #efece6;
  box-shadow: 0 14px 40px rgba(47, 33, 64, 0.22);
  will-change: transform;
}
.mb-swipekaart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-swipekaart--achter { transform: scale(0.94) translateY(14px); opacity: 0.85; }
.mb-swipekaart--voor { cursor: grab; transition: transform 0.22s var(--m27-ease); }
.mb-swipekaart--voor.sleept { transition: none; cursor: grabbing; }
.mb-swipekaart--weg { transition: transform 0.28s ease, opacity 0.28s ease; opacity: 0; }
.mb-swipekaart__tag { position: absolute; left: 10px; bottom: 10px; pointer-events: none; }
.mb-swipekaart__stempel {
  position: absolute;
  top: 16px;
  padding: 8px 16px;
  border-radius: var(--m27-radius-pill);
  font-size: 12px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}
.mb-swipekaart__stempel--goed { right: 14px; background: var(--m27-lichtgroen); color: var(--m27-donkergroen); }
.mb-swipekaart__stempel--niet { left: 14px; background: var(--m27-lila); color: var(--m27-tekst); }

.mb-swipe__knoppen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
/* min-width 0 houdt de twee knoppen naast elkaar, ook op 375 px. */
.mb-oordeel {
  flex: 1 1 0;
  min-width: 0;
  max-width: 240px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1.5px solid transparent;
  border-radius: var(--m27-radius-pill);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.mb-oordeel svg { width: 19px; height: 19px; flex: none; }
.mb-oordeel:hover { transform: translateY(-1px); }
.mb-oordeel:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }
.mb-oordeel--niet { background: var(--m27-wit); border-color: var(--m27-paars); color: var(--m27-paars); }
.mb-oordeel--niet:hover { background: rgba(131, 95, 165, 0.09); }
.mb-oordeel--goed { background: var(--m27-donkergroen); color: var(--m27-wit); }
.mb-oordeel--goed:hover { background: #4d5944; }

.mb-swipe__onder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
/* De knoppen van het design system zijn inline-flex; zonder deze regel
   negeert een verborgen knop zijn hidden-attribuut. */
.mb-swipe__onder [hidden] { display: none; }
.mb-swipe__hint {
  text-align: center;
  font-size: 12.5px;
  color: #7c776f;
  margin-top: 10px;
}
.mb-voortgang { margin-bottom: 14px; }
.mb-voortgang__balk {
  height: 8px;
  border-radius: var(--m27-radius-pill);
  background: #ece8e0;
  overflow: hidden;
}
.mb-voortgang__balk i {
  display: block;
  height: 100%;
  border-radius: var(--m27-radius-pill);
  background: var(--m27-donkergroen);
  transition: width 0.3s ease;
}
.mb-voortgang__tekst {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: #6f6a63;
  margin-top: 7px;
}

/* ==================== 5. Resultaat (E4) ================================= */

/* Op de lila kaart is donkergroen te licht; de tekstkleur haalt wél
   ruimschoots de contrastnorm. */
.mb-look__tekst { font-size: 14.5px; color: var(--m27-tekst); margin-bottom: 12px; }

/* Tags breken normaal nooit af; een stijlmix van drie namen wél, anders
   loopt de pagina op 375 px horizontaal over. */
.mb-look__mix {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 10px;
}
.mb-profiel { display: grid; gap: 9px; }
.mb-profiel__rij { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mb-profiel__naam { flex: 1 1 140px; min-width: 0; font-size: 14px; }
.mb-profiel__balk {
  flex: 2 1 160px;
  min-width: 90px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  overflow: hidden;
  display: flex;
}
.mb-profiel__balk i { display: block; height: 100%; }
.mb-profiel__goed { background: var(--m27-donkergroen); }
.mb-profiel__niet { background: var(--m27-paars); }
.mb-profiel__cijfer {
  flex: none;
  font-size: 11.5px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: var(--m27-tekst);
}
.mb-look__acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* Op een telefoon staat de naam op zijn eigen regel, met de balk en de
   cijfers eronder — anders breekt de rij op een lelijke plek. */
@media (max-width: 560px) {
  .mb-profiel__rij { gap: 6px 10px; }
  .mb-profiel__naam { flex: 1 1 100%; }
  .mb-profiel__balk { flex: 1 1 90px; }
}

/* ==================== 6. Bord, eigen beelden en Pinterest (E7) ========== */

.mb-groep { margin-bottom: 18px; }
.mb-groep:last-child { margin-bottom: 0; }
.mb-groep__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mb-groep__kop h4 {
  font-family: var(--m27-font-titel);
  letter-spacing: var(--m27-ls-titel);
  font-weight: 400;
  font-size: 16px;
  color: var(--m27-donkergroen);
}
.mb-pin { position: relative; border-radius: var(--m27-radius-kaart); }
.mb-pin img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--m27-radius-kaart);
  cursor: zoom-in;
  background: #efece6;
}
.mb-pin__label { position: absolute; left: 8px; bottom: 8px; pointer-events: none; }
.mb-pin__weg {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--m27-radius-pill);
  background: var(--m27-wit);
  color: var(--m27-donkergroen);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(47, 33, 64, 0.25);
}
.mb-pin__weg:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }

.mb-duo {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-bottom: 12px;
}
.mb-duo > .kaart { margin-bottom: 0; }
.mb-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.mb-pinterest { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.mb-pinterest .veld { flex: 1 1 210px; margin-bottom: 0; }
.mb-pinterest .m27-btn { min-height: 40px; }
.mb-bord {
  margin-top: 12px;
  background: #fff;
  border-radius: var(--m27-radius-kaart);
  padding: 12px;
  min-height: 110px;
}
.mb-bord__melding { font-size: 13px; color: #7c776f; margin: 0; text-align: center; padding: 20px 10px; }
.mb-bord span[data-pin-log] { display: block; }

/* ==================== 7. Lightbox ======================================= */

.mb-licht {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(44, 44, 43, 0.95);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: mb-licht-in 0.16s ease;
}
@keyframes mb-licht-in { from { opacity: 0; } }
.mb-licht img {
  max-width: min(1100px, 92vw);
  max-height: 70vh;
  border-radius: 12px;
  display: block;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
.mb-licht__balk {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  color: var(--m27-wit);
  flex-wrap: wrap;
  justify-content: center;
}
.mb-licht__titel { font-family: var(--m27-font-titel); letter-spacing: var(--m27-ls-titel); font-size: 17px; }
.mb-licht__onder { font-size: 13px; opacity: 0.75; }
.mb-licht__teller { font-size: 12px; letter-spacing: var(--m27-ls-label); text-transform: uppercase; opacity: 0.6; }
.mb-licht__knop {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(251, 251, 249, 0.35);
  background: rgba(44, 44, 43, 0.5);
  color: var(--m27-wit);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
}
.mb-licht__knop:hover { background: var(--m27-paars); border-color: var(--m27-paars); }
.mb-licht__knop:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }
.mb-licht__vorige { left: 14px; }
.mb-licht__volgende { right: 14px; }
.mb-licht__sluit { position: absolute; top: 14px; right: 14px; transform: none; }
.mb-licht__acties {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
  padding-bottom: env(safe-area-inset-bottom);
}
.mb-licht__actie {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid rgba(251, 251, 249, 0.4);
  border-radius: var(--m27-radius-pill);
  background: rgba(251, 251, 249, 0.08);
  color: var(--m27-wit);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
}
.mb-licht__actie svg { width: 17px; height: 17px; flex: none; }
.mb-licht__actie:hover { background: rgba(251, 251, 249, 0.18); }
.mb-licht__actie:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }
.mb-licht__actie.aan { background: var(--m27-donkergroen); border-color: var(--m27-donkergroen); }
.mb-licht__actie--goed.aan { background: var(--m27-lichtgroen); border-color: var(--m27-lichtgroen); color: var(--m27-donkergroen); }
.mb-licht__actie--niet.aan { background: var(--m27-lila); border-color: var(--m27-lila); color: var(--m27-tekst); }
.mb-licht__slotmelding { color: var(--m27-wit); opacity: 0.7; font-size: 13px; }

@media (max-width: 560px) {
  .mb-licht__knop { width: 38px; height: 38px; }
  .mb-licht__vorige { left: 6px; }
  .mb-licht__volgende { right: 6px; }
  .mb-licht img { max-height: 50vh; }
  .mb-licht__actie { flex: 1 1 132px; justify-content: center; padding: 10px 12px; }
}

/* ==================== Bewegingsvoorkeur ================================= */

@media (prefers-reduced-motion: reduce) {
  .mb-swipekaart--voor,
  .mb-swipekaart--weg,
  .mb-voortgang__balk i,
  .mb-keuze,
  .mb-rond { transition: none; }
  .mb-licht { animation: none; }
}