/* ==========================================================================
   MIFIT — huisstijl en blokken voor mifitsport.nl
   Versie 0.1 · 5 oktober 2026

   Eén stylesheet voor alle pagina's. Standaard HTML/CSS, geen framework.
   - Alle huisstijlwaarden staan als CSS-variabelen in :root.
   - Elk blok heeft een eigen class met prefix "mf-" (geen botsing met
     WordPress-thema's of pagebuilders).
   - Bron: Mifit design system + brand guide (kleur, Montserrat, hoekig,
     zwart-witfotografie met groen verloop).

   Lettertype: Montserrat via Google Fonts, in de <head> van elke pagina:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,800;1,800&display=swap">
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens (huisstijl)
   Layout: afwisselend creme, zand en groen als vlakken over de volle
   breedte; alles hoekig; oranje alleen voor acties.
   -------------------------------------------------------------------------- */
:root {
  /* Merkkleuren */
  --mf-groen: #34403a;      /* panelen, hero's, tekst op creme */
  --mf-creme: #fffaee;      /* standaard achtergrond, tekst op groen */
  --mf-oranje: #f9b335;     /* ALLEEN knoppen, tags, één uitgelicht woord op groen */
  --mf-grijsgroen: #5a6763; /* secundaire tekst op creme */
  --mf-steen: #cdcac3;      /* secundaire tekst en lijnen op groen */
  /* Web-extra's */
  --mf-zand-100: #f0ebdf;   /* tweede sectiegrond */
  --mf-zand-200: #d8d7cc;   /* vlakken, scheidingen */
  --mf-zand-300: #cbc8be;   /* hovers, randen */

  /* Rollen */
  --mf-bg: var(--mf-creme);
  --mf-ink: var(--mf-groen);
  --mf-ink-muted: var(--mf-grijsgroen);
  --mf-line: var(--mf-groen);
  --mf-accent: var(--mf-oranje);
  --mf-on-accent: var(--mf-groen);

  /* Typografie */
  --mf-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --mf-fs-display: clamp(2.4rem, 1.4rem + 4.2vw, 4.5rem);  /* 72px desktop */
  --mf-fs-h2: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);         /* 48px desktop */
  --mf-fs-h3: clamp(1.2rem, 1.05rem + 0.5vw, 1.375rem);    /* 22px */
  --mf-fs-body: 1.0625rem;                                  /* 17px */
  --mf-fs-small: 0.875rem;                                  /* 14px */
  --mf-fs-label: 0.8125rem;                                 /* 13px */

  /* Ruimte */
  --mf-space-1: 4px;
  --mf-space-2: 8px;
  --mf-space-3: 16px;
  --mf-space-4: 24px;
  --mf-space-5: 32px;
  --mf-space-6: 48px;
  --mf-space-7: 64px;
  --mf-space-8: 96px;
  --mf-section: clamp(56px, 4rem + 4vw, 112px);   /* verticale sectieruimte */
  --mf-gutter: clamp(16px, 4vw, 48px);            /* zijmarge */
  --mf-max: 1200px;                               /* inhoudsbreedte */

  --mf-radius: 0; /* Mifit is hoekig: nergens afgeronde hoeken */

  /* Beweging (rustig en vloeiend; uit bij prefers-reduced-motion) */
  --mf-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --mf-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mf-dur-fast: 0.25s;
  --mf-dur: 0.45s;
  --mf-dur-slow: 1.1s;
  --mf-header-h: 84px;

  color-scheme: light;
}


/* --------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--mf-bg);
  color: var(--mf-ink);
  font-family: var(--mf-font);
  font-size: var(--mf-fs-body);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: var(--mf-fs-display); line-height: 1; }
h2 { font-size: var(--mf-fs-h2); line-height: 1.08; }
h3 { font-size: var(--mf-fs-h3); line-height: 1.3; }
p { margin: 0; max-width: 62ch; }
strong { font-weight: 800; }

a { color: inherit; text-underline-offset: 0.2em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--mf-groen);
  outline-offset: 2px;
}
.mf-on-groen a:focus-visible,
.mf-on-groen button:focus-visible { outline-color: var(--mf-oranje); }

.mf-sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Container: één plek voor de zijmarge */
.mf-container {
  width: 100%;
  max-width: calc(var(--mf-max) + 2 * var(--mf-gutter));
  margin-inline: auto;
  padding-inline: var(--mf-gutter);
}

/* Secties en achtergronden */
.mf-section { padding-block: var(--mf-section); }
.mf-bg-creme { background: var(--mf-creme); color: var(--mf-groen); }
.mf-bg-zand  { background: var(--mf-zand-100); color: var(--mf-groen); }
.mf-bg-groen { background: var(--mf-groen); color: var(--mf-creme); }


/* --------------------------------------------------------------------------
   3. Kleine onderdelen
   -------------------------------------------------------------------------- */

/* Label: ExtraBold Italic, altijd hoofdletters */
.mf-label {
  display: block;
  margin-bottom: var(--mf-space-3);
  font-size: var(--mf-fs-label);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: var(--mf-ink-muted);
}
.mf-bg-groen .mf-label { color: var(--mf-steen); }

/* Uitgelicht woord: alleen op groen of foto (oranje op creme is onleesbaar) */
.mf-accent { color: var(--mf-oranje); }

/* Tag: oranje blok met groene tekst */
.mf-tag {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px;
  background: var(--mf-oranje); color: var(--mf-groen);
  font-size: var(--mf-fs-label); font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.2;
}

/* Knoppen */
.mf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border: 0; border-radius: var(--mf-radius);
  font: 800 1rem/1.2 var(--mf-font);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transform: translateZ(0);
  transition:
    transform var(--mf-dur) var(--mf-ease-out),
    background-color var(--mf-dur-fast) var(--mf-ease),
    color var(--mf-dur-fast) var(--mf-ease),
    box-shadow var(--mf-dur-fast) var(--mf-ease);
}
.mf-btn:hover { transform: translateY(-2px); }
.mf-btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.12s; }
.mf-btn__arrow { display: inline-block; transition: transform var(--mf-dur) var(--mf-ease-out); }
.mf-btn:hover .mf-btn__arrow { transform: translateX(4px); }
.mf-btn--primary { background: var(--mf-oranje); color: var(--mf-groen); }
.mf-btn--primary:hover { background: #ffc356; }
.mf-btn--secondary { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.mf-btn--secondary:hover { background: var(--mf-zand-100); }
.mf-bg-groen .mf-btn--secondary:hover { background: rgba(255, 250, 238, 0.08); }
.mf-btn__arrow { font-weight: 800; }

/* Tekstlink met pijl */
.mf-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; text-decoration: none;
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--mf-dur) var(--mf-ease-out), gap var(--mf-dur) var(--mf-ease-out);
}
.mf-link:hover { background-size: 100% 2px; gap: 12px; }

/* Sectiekop */
.mf-section-head { display: grid; gap: var(--mf-space-3); margin-bottom: var(--mf-space-6); max-width: 760px; }
.mf-section-head p { color: var(--mf-ink-muted); }
.mf-bg-groen .mf-section-head p { color: var(--mf-steen); }
.mf-section-head .mf-label { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   BLOK: eventbanner (tijdelijk, bv. Myrox)
   -------------------------------------------------------------------------- */
.mf-eventbanner { background: var(--mf-zand-100); border-bottom: 1px solid var(--mf-zand-300); font-size: var(--mf-fs-small); }
.mf-eventbanner__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding-block: 10px;
}
.mf-eventbanner p { max-width: none; font-weight: 400; }
.mf-eventbanner a { font-weight: 800; }


/* --------------------------------------------------------------------------
   BLOK: header
   -------------------------------------------------------------------------- */
/* Blijft bovenaan staan tijdens scrollen; wordt compacter na de eerste scroll (class .is-scrolled via JS) */
.mf-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: rgba(255, 250, 238, 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--mf-zand-200);
  transition: background-color var(--mf-dur) var(--mf-ease);
}
.mf-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mf-space-4);
  min-height: var(--mf-header-h);
  transition: min-height var(--mf-dur) var(--mf-ease-out);
}
.mf-header.is-scrolled { --mf-header-h: 64px; background: rgba(255, 250, 238, 0.94); }
.mf-header__logo img { width: 150px; height: auto; transition: width var(--mf-dur) var(--mf-ease-out); }
.mf-header.is-scrolled .mf-header__logo img { width: 120px; }
[id] { scroll-margin-top: 80px; }
.mf-nav { display: flex; align-items: center; gap: var(--mf-space-5); }
.mf-nav__list { display: flex; align-items: center; gap: var(--mf-space-4); margin: 0; padding: 0; list-style: none; }
.mf-nav__list a {
  font-weight: 400; font-size: 0.95rem; text-decoration: none; padding-block: 6px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--mf-dur) var(--mf-ease-out);
}
.mf-nav__list a:hover, .mf-nav__list a[aria-current="page"] { background-size: 100% 1px; }
.mf-nav__item--sub { position: relative; }
.mf-nav__sub {
  position: absolute; left: -16px; top: 100%;
  display: none; min-width: 240px; margin: 0; padding: 8px 0; list-style: none;
  background: var(--mf-creme); border: 1px solid var(--mf-groen);
}
.mf-nav__sub a { display: block; padding: 8px 16px; border: 0; }
.mf-nav__sub a:hover { background: var(--mf-zand-100); }
.mf-nav__item--sub:hover .mf-nav__sub,
.mf-nav__item--sub:focus-within .mf-nav__sub { display: block; }
.mf-nav__toggle { display: none; }

@media (max-width: 960px) {
  .mf-header__logo img { width: 120px; }
  .mf-nav__toggle {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 8px 12px;
    background: none; border: 1px solid var(--mf-groen); border-radius: 0;
    font: 800 0.9rem/1 var(--mf-font); color: var(--mf-groen); cursor: pointer;
  }
  .mf-nav__panel {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    padding: var(--mf-space-4) var(--mf-gutter) var(--mf-space-5);
    background: var(--mf-creme); border-bottom: 1px solid var(--mf-groen);
  }
  .mf-nav.is-open .mf-nav__panel { display: grid; gap: var(--mf-space-4); }
  .mf-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .mf-nav__list a { display: block; padding: 12px 0; font-size: 1.05rem; border-bottom: 1px solid var(--mf-zand-200); }
  .mf-nav__sub { position: static; display: block; min-width: 0; padding: 0 0 0 16px; border: 0; background: none; }
  .mf-nav__sub a { padding: 10px 0; font-size: 0.98rem; }
}
@media (min-width: 961px) {
  .mf-nav__panel { display: flex; align-items: center; gap: var(--mf-space-5); }
}


/* --------------------------------------------------------------------------
   BLOK: hero (PhotoHeader / SplitPanel)
   Zwart-witfoto rechts, loopt over in een groen paneel met de kop.
   -------------------------------------------------------------------------- */
.mf-hero { background: var(--mf-groen); color: var(--mf-creme); }
.mf-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  min-height: min(680px, 82vh);
}
.mf-hero__content {
  display: flex; flex-direction: column; justify-content: center; gap: var(--mf-space-4);
  padding-block: var(--mf-space-8);
  padding-inline: max(var(--mf-gutter), calc((100vw - var(--mf-max)) / 2)) var(--mf-space-7);
}
.mf-hero__content .mf-label { margin-bottom: 0; color: var(--mf-steen); }
.mf-hero h1 { max-width: 13ch; }
.mf-hero__sub { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); font-weight: 300; color: var(--mf-creme); max-width: 40ch; }
.mf-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mf-space-4); margin-top: var(--mf-space-2); }
.mf-proof {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin: var(--mf-space-3) 0 0; padding: var(--mf-space-3) 0 0; list-style: none;
  border-top: 1px solid rgba(205, 202, 195, 0.35);
  font-size: var(--mf-fs-small); font-weight: 400; color: var(--mf-steen);
}
.mf-proof strong { color: var(--mf-creme); }
.mf-hero__media { position: relative; overflow: hidden; background: var(--mf-groen); }
.mf-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1); }
.mf-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--mf-groen) 0%, rgba(52, 64, 58, 0.55) 18%, rgba(52, 64, 58, 0) 45%);
}

@media (max-width: 860px) {
  .mf-hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .mf-hero__media { order: -1; aspect-ratio: 4 / 3; max-width: 100%; }
  .mf-hero__media img { object-position: 50% 25%; }
  .mf-hero__media::after { background: linear-gradient(180deg, rgba(52, 64, 58, 0) 45%, rgba(52, 64, 58, 0.7) 78%, var(--mf-groen) 100%); }
  .mf-hero__content { padding: var(--mf-space-4) var(--mf-gutter) var(--mf-space-7); margin-top: -48px; position: relative; z-index: 1; }
}


/* --------------------------------------------------------------------------
   BLOK: herkenning
   -------------------------------------------------------------------------- */
.mf-herkenning__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mf-space-5) var(--mf-space-7); align-items: end; margin-bottom: var(--mf-space-6); }
.mf-herkenning__intro p { color: var(--mf-ink-muted); font-size: 1.125rem; }
.mf-herkenning__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mf-space-4); margin: 0; padding: 0; list-style: none; }
.mf-situatie { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--mf-groen); background: var(--mf-creme); overflow: hidden; }
.mf-situatie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1); transition: transform var(--mf-dur-slow) var(--mf-ease-out); }
.mf-situatie:hover img { transform: scale(1.04); }
.mf-situatie p { padding: var(--mf-space-4); font-size: 1.05rem; font-weight: 400; line-height: 1.55; }
.mf-herkenning__slot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mf-space-4); margin-top: var(--mf-space-6); padding-top: var(--mf-space-5); border-top: 1px solid var(--mf-groen); }
.mf-herkenning__slot p { font-size: var(--mf-fs-h3); font-weight: 800; line-height: 1.3; }

@media (max-width: 860px) {
  .mf-herkenning__intro { grid-template-columns: 1fr; }
  .mf-herkenning__grid { grid-template-columns: 1fr; }
  .mf-situatie { grid-template-columns: 40% 1fr; grid-template-rows: auto; }
  .mf-situatie img { height: 100%; aspect-ratio: auto; min-height: 140px; }
  .mf-situatie p { padding: var(--mf-space-3); font-size: 1rem; align-self: center; }
}


/* --------------------------------------------------------------------------
   BLOK: team (SplitPanel)
   Links foto die overloopt in groen paneel met kop; rechts creme met inhoud.
   -------------------------------------------------------------------------- */
.mf-team { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--mf-creme); }
.mf-team__panel { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 640px; background: var(--mf-groen); color: var(--mf-creme); overflow: hidden; }
.mf-team__panel img { position: absolute; inset: 0 0 auto 0; width: 100%; height: 62%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1); }
.mf-team__panel::before { content: ""; position: absolute; left: 0; right: 0; top: 30%; height: 32.5%; background: linear-gradient(180deg, rgba(52, 64, 58, 0), var(--mf-groen)); z-index: 1; }
.mf-team__panel-text { position: relative; z-index: 2; display: grid; gap: var(--mf-space-3); padding: var(--mf-space-6) var(--mf-space-6) var(--mf-space-6) max(var(--mf-gutter), calc((100vw - var(--mf-max)) / 2)); }
.mf-team__panel-text .mf-label { margin: 0; color: var(--mf-steen); }
.mf-team__panel-text p { color: var(--mf-creme); }
.mf-team__content { padding: var(--mf-space-7) max(var(--mf-gutter), calc((100vw - var(--mf-max)) / 2)) var(--mf-space-7) var(--mf-space-6); display: flex; align-items: center; }
.mf-team__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--mf-groen); border-left: 1px solid var(--mf-groen); width: 100%; margin: 0; padding: 0; list-style: none; }
.mf-team__item { display: grid; align-content: start; gap: var(--mf-space-2); padding: var(--mf-space-5); border-right: 1px solid var(--mf-groen); border-bottom: 1px solid var(--mf-groen); }
.mf-team__item p { font-size: 1rem; color: var(--mf-ink-muted); }

@media (max-width: 960px) {
  .mf-team { grid-template-columns: 1fr; }
  .mf-team__panel { min-height: 520px; }
  .mf-team__panel-text { padding: var(--mf-space-5) var(--mf-gutter) var(--mf-space-6); }
  .mf-team__content { padding: var(--mf-space-6) var(--mf-gutter); }
}
@media (max-width: 600px) {
  .mf-team__grid { grid-template-columns: 1fr; }
  .mf-team__item { padding: var(--mf-space-4); }
}


/* --------------------------------------------------------------------------
   BLOK: stappen (hoe de gratis intake werkt)
   -------------------------------------------------------------------------- */
.mf-stappen__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mf-space-7); align-items: stretch; }
.mf-stappen__media { position: relative; min-height: 420px; }
.mf-stappen__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.mf-stappen__list { display: grid; gap: 0; margin: 0 0 var(--mf-space-5); padding: 0; list-style: none; counter-reset: stap; }
.mf-stap { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--mf-space-4); padding: var(--mf-space-4) 0; border-top: 1px solid var(--mf-groen); }
.mf-stap:last-child { border-bottom: 1px solid var(--mf-groen); }
.mf-stap__nr {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--mf-oranje); color: var(--mf-groen);
  font-size: 1.35rem; font-weight: 800; font-style: italic; line-height: 1;
}
.mf-stap h3 { margin-bottom: 4px; }
.mf-stap p { font-size: 1rem; color: var(--mf-ink-muted); }
.mf-stappen__note { font-weight: 400; margin-bottom: var(--mf-space-4); }
.mf-stappen__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mf-space-4); }

@media (max-width: 860px) {
  .mf-stappen__grid { grid-template-columns: 1fr; gap: var(--mf-space-5); }
  .mf-stappen__media { min-height: 0; aspect-ratio: 16 / 10; max-width: 100%; }
}


/* --------------------------------------------------------------------------
   BLOK: aanbodkaarten
   -------------------------------------------------------------------------- */
.mf-aanbod__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mf-space-4); margin: 0; padding: 0; list-style: none; }
.mf-kaart { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--mf-groen); background: var(--mf-creme); overflow: hidden; }
.mf-kaart img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(1); transition: transform var(--mf-dur-slow) var(--mf-ease-out); }
.mf-kaart:hover img { transform: scale(1.04); }
.mf-kaart__body { display: flex; flex-direction: column; gap: var(--mf-space-3); padding: var(--mf-space-5) var(--mf-space-4) var(--mf-space-4); }
.mf-kaart__body p { font-size: 1rem; color: var(--mf-ink-muted); }
.mf-kaart__body .mf-link { margin-top: auto; align-self: flex-start; }
.mf-aanbod__zakelijk { margin-top: var(--mf-space-5); font-size: 1rem; font-weight: 400; }
.mf-aanbod__zakelijk a { font-weight: 800; }

@media (max-width: 960px) {
  .mf-aanbod__grid { grid-template-columns: 1fr; }
  .mf-kaart { grid-template-columns: 40% 1fr; grid-template-rows: auto; }
  .mf-kaart img { height: 100%; aspect-ratio: auto; min-height: 180px; }
}
@media (max-width: 560px) {
  .mf-kaart { grid-template-columns: 1fr; }
  .mf-kaart img { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
}


/* --------------------------------------------------------------------------
   BLOK: bewijs (cijfers)
   -------------------------------------------------------------------------- */
.mf-bewijs__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--mf-space-6); align-items: end; }
.mf-bewijs__cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-left: 1px solid rgba(205, 202, 195, 0.4); }
.mf-cijfer { display: grid; gap: 6px; padding: 0 var(--mf-space-4); border-right: 1px solid rgba(205, 202, 195, 0.4); }
.mf-cijfer__waarde { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--mf-creme); }
.mf-cijfer__waarde--accent { color: var(--mf-oranje); }
.mf-cijfer__label { font-size: var(--mf-fs-small); font-weight: 400; color: var(--mf-steen); }
.mf-bewijs__links { display: flex; flex-wrap: wrap; gap: var(--mf-space-3) var(--mf-space-5); margin-top: var(--mf-space-5); }

@media (max-width: 860px) {
  .mf-bewijs__inner { grid-template-columns: 1fr; }
  .mf-bewijs__cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; row-gap: var(--mf-space-5); }
  .mf-cijfer { padding: 0 var(--mf-space-3) 0 0; border-right: 0; border-top: 1px solid rgba(205, 202, 195, 0.4); padding-top: var(--mf-space-3); }
}


/* --------------------------------------------------------------------------
   BLOK: faq (veelgestelde vragen) — alle antwoorden direct zichtbaar
   -------------------------------------------------------------------------- */
.mf-faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--mf-space-6); }
.mf-faq__list { margin: 0; border-top: 1px solid var(--mf-groen); }
.mf-faq__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mf-space-2) var(--mf-space-5); padding: var(--mf-space-4) 0; border-bottom: 1px solid var(--mf-groen); }
.mf-faq__item dt { font-size: 1.05rem; font-weight: 800; line-height: 1.4; }
.mf-faq__item dd { margin: 0; font-size: 1rem; color: var(--mf-ink-muted); }

@media (max-width: 860px) {
  .mf-faq__grid { grid-template-columns: 1fr; gap: var(--mf-space-4); }
  .mf-faq__item { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   BLOK: cta-formulier
   -------------------------------------------------------------------------- */
.mf-cta__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--mf-space-7); align-items: start; }
.mf-cta__text { display: grid; gap: var(--mf-space-4); }
.mf-cta__text p { color: var(--mf-creme); font-size: 1.125rem; }
.mf-cta__checks { display: grid; gap: 10px; margin: var(--mf-space-2) 0 0; padding: 0; list-style: none; font-weight: 400; }
.mf-cta__checks li { display: flex; gap: 12px; align-items: baseline; }
.mf-cta__checks li::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--mf-oranje); transform: translateY(-1px); }

.mf-form { display: grid; gap: var(--mf-space-4); padding: var(--mf-space-5); background: var(--mf-creme); color: var(--mf-groen); }
.mf-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mf-space-4); }
.mf-field { display: grid; gap: 6px; min-width: 0; }
.mf-field label, .mf-field legend { font-size: var(--mf-fs-small); font-weight: 800; }
.mf-field .mf-optional { font-weight: 300; color: var(--mf-grijsgroen); }
.mf-field input, .mf-field select {
  width: 100%; min-height: 48px; padding: 10px 14px;
  background: var(--mf-creme); border: 1px solid var(--mf-groen); border-radius: 0;
  font: 400 1rem/1.3 var(--mf-font); color: var(--mf-groen);
}
.mf-fieldset { margin: 0; padding: 0; border: 0; }
.mf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mf-chip { position: relative; }
.mf-chip input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.mf-chip span {
  display: inline-block; padding: 9px 14px;
  border: 1px solid var(--mf-groen); background: transparent;
  font-size: 0.9rem; font-weight: 400; cursor: pointer; user-select: none;
  transition: background-color var(--mf-dur-fast) var(--mf-ease), color var(--mf-dur-fast) var(--mf-ease), transform var(--mf-dur) var(--mf-ease-out);
}
.mf-chip:hover span { transform: translateY(-1px); }
.mf-chip input:checked + span { background: var(--mf-groen); color: var(--mf-creme); }
.mf-chip input:focus-visible + span { outline: 2px solid var(--mf-groen); outline-offset: 2px; }
.mf-check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--mf-fs-small); font-weight: 400; }
.mf-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--mf-groen); }
.mf-form__submit { width: 100%; }
.mf-form__note { font-size: var(--mf-fs-small); color: var(--mf-grijsgroen); }
.mf-form__success { display: grid; gap: var(--mf-space-2); padding: var(--mf-space-4); border: 1px solid var(--mf-groen); background: var(--mf-zand-100); }

@media (max-width: 860px) {
  .mf-cta__grid { grid-template-columns: 1fr; gap: var(--mf-space-5); }
}
@media (max-width: 520px) {
  .mf-form { padding: var(--mf-space-4); }
  .mf-form__row { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   BLOK: footer
   -------------------------------------------------------------------------- */
.mf-footer { background: var(--mf-groen); color: var(--mf-creme); border-top: 1px solid rgba(205, 202, 195, 0.3); font-size: 0.95rem; }
.mf-footer__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: var(--mf-space-5); padding-block: var(--mf-space-7) var(--mf-space-6); }
.mf-footer__brand img { width: 170px; margin-bottom: var(--mf-space-3); }
.mf-footer__brand p { color: var(--mf-steen); font-size: var(--mf-fs-small); }
.mf-footer h2 { font-size: var(--mf-fs-label); font-style: italic; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mf-steen); margin-bottom: var(--mf-space-3); }
.mf-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.mf-footer a { text-decoration: none; }
.mf-footer a:hover { text-decoration: underline; }
.mf-footer address { font-style: normal; display: grid; gap: 6px; }
.mf-footer__hours { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 4px 16px; margin: 0; font-variant-numeric: tabular-nums; }
.mf-footer__hours dd { margin: 0; }
.mf-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--mf-space-3); padding-block: var(--mf-space-4); border-top: 1px solid rgba(205, 202, 195, 0.3); font-size: var(--mf-fs-small); color: var(--mf-steen); }
.mf-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--mf-space-4); }

@media (max-width: 860px) {
  .mf-footer__grid { grid-template-columns: 1fr 1fr; }
  .mf-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .mf-footer__grid { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   BLOK: sticky-cta (alleen mobiel)
   -------------------------------------------------------------------------- */
.mf-sticky-cta { display: none; }
@media (max-width: 720px) {
  .mf-sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 10px var(--mf-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--mf-groen); border-top: 1px solid rgba(205, 202, 195, 0.35);
  }
  .mf-sticky-cta .mf-btn { width: 100%; }
  body.mf-has-sticky { padding-bottom: 76px; }
}


/* --------------------------------------------------------------------------
   Beweging bij laden: hero schuift rustig in (blijft altijd leesbaar)
   -------------------------------------------------------------------------- */
@keyframes mf-rise { from { transform: translateY(18px); opacity: 0.35; } to { transform: none; opacity: 1; } }
@keyframes mf-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
.mf-hero__content > * { animation: mf-rise 0.9s var(--mf-ease-out) both; }
.mf-hero__content > *:nth-child(2) { animation-delay: 0.06s; }
.mf-hero__content > *:nth-child(3) { animation-delay: 0.12s; }
.mf-hero__content > *:nth-child(4) { animation-delay: 0.18s; }
.mf-hero__content > *:nth-child(5) { animation-delay: 0.24s; }
.mf-hero__media img { animation: mf-settle 1.8s var(--mf-ease-out) both; }


/* ==========================================================================
   VARIANT DONKER
   Zet <body class="mf-page--donker">. Groen is de grond; creme is het
   contrastvlak. Foto's lopen over in groen. Blokken hieronder zijn
   varianten (modifiers) op de standaardblokken.
   ========================================================================== */
.mf-page--donker { background: var(--mf-groen); color: var(--mf-creme); }

/* Header op groen */
.mf-page--donker .mf-header { background: rgba(52, 64, 58, 0.82); border-bottom-color: rgba(205, 202, 195, 0.18); color: var(--mf-creme); }
.mf-page--donker .mf-header.is-scrolled { background: rgba(52, 64, 58, 0.94); }
.mf-page--donker .mf-nav__sub { background: var(--mf-groen); border-color: var(--mf-steen); }
.mf-page--donker .mf-nav__sub a:hover { background: rgba(255, 250, 238, 0.06); }
.mf-page--donker .mf-header a:focus-visible, .mf-page--donker .mf-header button:focus-visible { outline-color: var(--mf-oranje); }
@media (max-width: 960px) {
  .mf-page--donker .mf-nav__toggle { color: var(--mf-creme); border-color: var(--mf-steen); }
  .mf-page--donker .mf-nav__panel { background: var(--mf-groen); border-bottom-color: var(--mf-steen); }
  .mf-page--donker .mf-nav__list a { border-bottom-color: rgba(205, 202, 195, 0.2); }
}
.mf-page--donker .mf-eventbanner { background: #2b3530; border-bottom-color: rgba(205, 202, 195, 0.18); color: var(--mf-creme); }

/* BLOK: hero--foto — grote foto rechts, loopt naar links én onder over in groen; kop overlapt het beeld */
.mf-hero--foto { position: relative; overflow: hidden; background: var(--mf-groen); }
.mf-hero--foto .mf-hero__media { position: absolute; inset: 0 0 0 auto; width: 62%; }
.mf-hero--foto .mf-hero__media::after {
  background:
    linear-gradient(90deg, var(--mf-groen) 0%, rgba(52, 64, 58, 0.7) 22%, rgba(52, 64, 58, 0) 55%),
    linear-gradient(0deg, var(--mf-groen) 0%, rgba(52, 64, 58, 0) 35%);
}
.mf-hero--foto .mf-hero__media img { object-position: 62% 30%; }
.mf-hero--foto .mf-hero__inner { position: relative; z-index: 1; display: grid; align-content: end; gap: var(--mf-space-4); min-height: min(760px, 88vh); padding-block: var(--mf-space-8) var(--mf-space-7); }
.mf-hero--foto h1 { font-size: clamp(2.6rem, 1.2rem + 5.6vw, 5.75rem); line-height: 0.95; max-width: 11ch; }
.mf-hero--foto .mf-hero__sub { max-width: 38ch; }
.mf-hero--foto .mf-hero__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mf-space-4); margin-top: var(--mf-space-4); padding-top: var(--mf-space-4); border-top: 1px solid rgba(205, 202, 195, 0.3); }
.mf-hero--foto .mf-proof { margin: 0; padding: 0; border: 0; }
.mf-hero--foto .mf-hero__inner > * { animation: mf-rise 0.9s var(--mf-ease-out) both; }
.mf-hero--foto .mf-hero__inner > *:nth-child(2) { animation-delay: 0.06s; }
.mf-hero--foto .mf-hero__inner > *:nth-child(3) { animation-delay: 0.12s; }
.mf-hero--foto .mf-hero__inner > *:nth-child(4) { animation-delay: 0.18s; }
@media (max-width: 860px) {
  .mf-hero--foto .mf-hero__media { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 5; max-height: 72vh; }
  .mf-hero--foto .mf-hero__media::after { background: linear-gradient(0deg, var(--mf-groen) 0%, rgba(52, 64, 58, 0.6) 25%, rgba(52, 64, 58, 0) 55%); }
  .mf-hero--foto .mf-hero__inner { min-height: 0; margin-top: -140px; padding-block: 0 var(--mf-space-6); }
}

/* BLOK: herkenning--foto — hoge fototegels, tekst op het verloop */
.mf-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mf-space-3); margin: 0; padding: 0; list-style: none; }
.mf-tegel { position: relative; overflow: hidden; aspect-ratio: 3 / 4; max-width: 100%; background: var(--mf-groen); }
.mf-tegel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform var(--mf-dur-slow) var(--mf-ease-out); }
.mf-tegel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--mf-groen) 0%, rgba(52, 64, 58, 0.85) 28%, rgba(52, 64, 58, 0) 62%); }
.mf-tegel p { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--mf-space-5) var(--mf-space-4) var(--mf-space-4); font-size: 1.1rem; font-weight: 400; line-height: 1.5; color: var(--mf-creme); }
.mf-tegel:hover img { transform: scale(1.05); }
@media (max-width: 860px) {
  .mf-tegels { grid-template-columns: 1fr; }
  .mf-tegel { aspect-ratio: 4 / 3; }
}

/* Algemene donkere sectieteksten */
.mf-page--donker .mf-bg-groen .mf-section-head p,
.mf-page--donker .mf-muted-on-groen { color: var(--mf-steen); }
.mf-page--donker .mf-herkenning__intro p { color: var(--mf-steen); }
.mf-page--donker .mf-herkenning__slot { border-top-color: rgba(205, 202, 195, 0.3); }

/* BLOK: team--donker — foto links loopt naar rechts over in groen, items rechts op groen */
.mf-team--donker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--mf-groen); color: var(--mf-creme); }
.mf-team--donker .mf-team__media { position: relative; min-height: 640px; overflow: hidden; }
.mf-team--donker .mf-team__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: grayscale(1); }
.mf-team--donker .mf-team__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, var(--mf-groen) 0%, rgba(52, 64, 58, 0) 45%); }
.mf-team--donker .mf-team__body { display: grid; align-content: center; gap: var(--mf-space-5); padding: var(--mf-space-7) max(var(--mf-gutter), calc((100vw - var(--mf-max)) / 2)) var(--mf-space-7) var(--mf-space-6); }
.mf-team--donker .mf-team__body > p { color: var(--mf-steen); max-width: 52ch; }
.mf-lijst { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(205, 202, 195, 0.3); }
.mf-lijst li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--mf-space-2) var(--mf-space-4); padding: var(--mf-space-4) 0; border-bottom: 1px solid rgba(205, 202, 195, 0.3); }
.mf-lijst h3 { font-size: 1.15rem; }
.mf-lijst p { font-size: 1rem; color: var(--mf-steen); }
@media (max-width: 960px) {
  .mf-team--donker { grid-template-columns: 1fr; }
  .mf-team--donker .mf-team__media { min-height: 0; aspect-ratio: 4 / 3; max-width: 100%; }
  .mf-team--donker .mf-team__media::after { background: linear-gradient(0deg, var(--mf-groen) 0%, rgba(52, 64, 58, 0) 45%); }
  .mf-team--donker .mf-team__body { padding: var(--mf-space-4) var(--mf-gutter) var(--mf-space-7); }
}
@media (max-width: 560px) { .mf-lijst li { grid-template-columns: 1fr; } }

/* BLOK: stappen--rij — drie stappen naast elkaar op creme (het contrastvlak) */
.mf-stappen--rij .mf-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 var(--mf-space-6); padding: 0; list-style: none; border-top: 1px solid var(--mf-groen); }
.mf-stappen--rij .mf-rij li { display: grid; align-content: start; gap: var(--mf-space-3); padding: var(--mf-space-5) var(--mf-space-5) var(--mf-space-5) 0; }
.mf-stappen--rij .mf-rij li + li { padding-left: var(--mf-space-5); border-left: 1px solid var(--mf-groen); }
.mf-stappen--rij .mf-rij__nr { font-size: clamp(3rem, 2rem + 3vw, 4.5rem); font-weight: 800; font-style: italic; line-height: 0.9; color: var(--mf-groen); font-variant-numeric: tabular-nums; }
.mf-stappen--rij .mf-rij p { font-size: 1rem; color: var(--mf-ink-muted); }
.mf-stappen--rij .mf-stappen__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mf-space-4); }
@media (max-width: 860px) {
  .mf-stappen--rij .mf-rij { grid-template-columns: 1fr; }
  .mf-stappen--rij .mf-rij li, .mf-stappen--rij .mf-rij li + li { padding: var(--mf-space-4) 0; border-left: 0; border-bottom: 1px solid var(--mf-groen); }
}

/* BLOK: aanbodkaarten--foto — hoge fotokaarten, tekst op het verloop */
.mf-fotokaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mf-space-3); margin: 0; padding: 0; list-style: none; }
.mf-fotokaart { position: relative; overflow: hidden; min-height: 560px; background: var(--mf-groen); }
.mf-fotokaart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform var(--mf-dur-slow) var(--mf-ease-out); }
.mf-fotokaart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--mf-groen) 0%, rgba(52, 64, 58, 0.9) 35%, rgba(52, 64, 58, 0) 70%); transition: opacity var(--mf-dur) var(--mf-ease); }
.mf-fotokaart__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: var(--mf-space-3); padding: var(--mf-space-5) var(--mf-space-4); }
.mf-fotokaart__body p { font-size: 1rem; color: var(--mf-steen); }
.mf-fotokaart__body .mf-link { justify-self: start; color: var(--mf-creme); }
.mf-fotokaart:hover img { transform: scale(1.05); }
.mf-fotokaart .mf-fotokaart__cover { position: absolute; inset: 0; z-index: 2; }
@media (max-width: 960px) {
  .mf-fotokaarten { grid-template-columns: 1fr; }
  .mf-fotokaart { min-height: 440px; }
}

/* BLOK: bewijs--licht — cijfers op creme */
.mf-bewijs--licht { background: var(--mf-creme); color: var(--mf-groen); }
.mf-bewijs--licht .mf-bewijs__cijfers { border-left-color: var(--mf-groen); }
.mf-bewijs--licht .mf-cijfer { border-right-color: var(--mf-groen); }
.mf-bewijs--licht .mf-cijfer__waarde { color: var(--mf-groen); }
.mf-bewijs--licht .mf-cijfer__label { color: var(--mf-grijsgroen); }
@media (max-width: 860px) { .mf-bewijs--licht .mf-cijfer { border-top-color: var(--mf-groen); } }

/* BLOK: faq op groen */
.mf-page--donker .mf-bg-groen .mf-faq__list { border-top-color: rgba(205, 202, 195, 0.3); }
.mf-page--donker .mf-bg-groen .mf-faq__item { border-bottom-color: rgba(205, 202, 195, 0.3); }
.mf-page--donker .mf-bg-groen .mf-faq__item dd { color: var(--mf-steen); }

/* BLOK: cta-formulier--foto — foto op de achtergrond die overloopt in groen */
.mf-cta--foto { position: relative; overflow: hidden; }
.mf-cta--foto .mf-cta__bg { position: absolute; inset: 0 auto 0 0; width: 55%; }
.mf-cta--foto .mf-cta__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.mf-cta--foto .mf-cta__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(52, 64, 58, 0.55) 0%, rgba(52, 64, 58, 0.75) 50%, var(--mf-groen) 100%); }
.mf-cta--foto .mf-container { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .mf-cta--foto .mf-cta__bg { width: 100%; height: 360px; }
  .mf-cta--foto .mf-cta__bg::after { background: linear-gradient(0deg, var(--mf-groen) 0%, rgba(52, 64, 58, 0.6) 100%); }
}


/* --------------------------------------------------------------------------
   Minder beweging voor wie dat heeft ingesteld
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .mf-btn:hover, .mf-chip:hover span { transform: none; }
  .mf-kaart:hover img, .mf-situatie:hover img, .mf-tegel:hover img, .mf-fotokaart:hover img { transform: none; }
}

/* Labels in variant donker: steen op groen, grijsgroen op creme */
.mf-page--donker .mf-label { color: var(--mf-steen); }
.mf-page--donker .mf-bg-creme .mf-label,
.mf-page--donker .mf-bewijs--licht .mf-label { color: var(--mf-grijsgroen); }


/* ==========================================================================
   AANVULLINGEN VARIANT DONKER (stijl septemberdeal-pagina) · 5 okt 2026
   ========================================================================== */

/* Diepte in groene vlakken: subtiel verloop met lichtere plek linksboven */
.mf-diepte { background: radial-gradient(120% 100% at 12% 0%, #3e4c44 0%, var(--mf-groen) 60%); }

/* Oranje labels: alleen op groen en op foto */
.mf-page--donker .mf-bg-groen .mf-label,
.mf-page--donker .mf-diepte .mf-label,
.mf-page--donker .mf-hero--vol .mf-label,
.mf-page--donker .mf-fotosectie .mf-label,
.mf-page--donker .mf-team--donker .mf-label { color: var(--mf-oranje); }

/* BLOK: hero--vol — foto over de volle breedte met groene waas */
.mf-hero--vol { position: relative; overflow: hidden; background: var(--mf-groen); color: var(--mf-creme); }
.mf-hero--vol .mf-hero__bg { position: absolute; inset: 0; }
.mf-hero--vol .mf-hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); animation: mf-settle 1.8s var(--mf-ease-out) both; }
.mf-hero--vol .mf-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(52, 64, 58, 0.88) 0%, rgba(52, 64, 58, 0.35) 55%, rgba(52, 64, 58, 0.9) 100%),
    linear-gradient(90deg, rgba(52, 64, 58, 0.75) 0%, rgba(52, 64, 58, 0) 65%);
}
.mf-hero--vol .mf-hero__inner { position: relative; z-index: 1; display: grid; align-content: center; gap: var(--mf-space-4); min-height: min(780px, 90vh); padding-block: var(--mf-space-8); }
.mf-hero--vol h1 { font-size: clamp(2.6rem, 1.2rem + 5.6vw, 5.75rem); line-height: 0.95; letter-spacing: -0.02em; max-width: 12ch; }
.mf-hero--vol .mf-hero__sub { max-width: 40ch; }
.mf-hero--vol .mf-hero__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mf-space-4) var(--mf-space-5); margin-top: var(--mf-space-3); }
.mf-hero--vol .mf-proof { margin: 0; padding: 0; border: 0; }
.mf-hero--vol .mf-hero__inner > * { animation: mf-rise 0.9s var(--mf-ease-out) both; }
.mf-hero--vol .mf-hero__inner > *:nth-child(2) { animation-delay: 0.06s; }
.mf-hero--vol .mf-hero__inner > *:nth-child(3) { animation-delay: 0.12s; }
.mf-hero--vol .mf-hero__inner > *:nth-child(4) { animation-delay: 0.18s; }
@media (max-width: 860px) {
  .mf-hero--vol .mf-hero__inner { min-height: 82vh; align-content: end; padding-block: var(--mf-space-8) var(--mf-space-6); }
}

/* Koppen in donker: iets strakker gespatieerd */
.mf-page--donker h2 { letter-spacing: -0.015em; }

/* BLOK: herkenning op creme (tegels blijven donker) */
.mf-page--donker .mf-bg-creme .mf-herkenning__intro p { color: var(--mf-grijsgroen); }
.mf-page--donker .mf-bg-creme .mf-herkenning__slot { border-top-color: var(--mf-groen); }

/* BLOK: fotosectie — sectie met foto over de volle breedte als achtergrond */
.mf-fotosectie { position: relative; overflow: hidden; background: var(--mf-groen); color: var(--mf-creme); }
.mf-fotosectie__bg { position: absolute; inset: 0; }
.mf-fotosectie__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.mf-fotosectie__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(52, 64, 58, 0.9) 0%, rgba(52, 64, 58, 0.55) 45%, rgba(52, 64, 58, 0.85) 100%); }
.mf-fotosectie > .mf-container { position: relative; z-index: 1; }
.mf-fotosectie .mf-section-head p { color: var(--mf-creme); }

/* BLOK: stappen--glas — doorschijnende kaarten op foto, oranje tijdslabel en voortgangsbalk */
.mf-glaskaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mf-space-3); margin: 0 0 var(--mf-space-6); padding: 0; list-style: none; }
.mf-glaskaart {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--mf-space-3);
  padding: var(--mf-space-5) var(--mf-space-4) var(--mf-space-4);
  background: rgba(52, 64, 58, 0.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(205, 202, 195, 0.22);
  transition: transform var(--mf-dur) var(--mf-ease-out), border-color var(--mf-dur) var(--mf-ease);
}
.mf-glaskaart:hover { transform: translateY(-4px); border-color: rgba(249, 179, 53, 0.6); }
.mf-glaskaart__label { font-size: var(--mf-fs-label); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mf-oranje); }
.mf-glaskaart p { font-size: 1rem; color: var(--mf-steen); }
.mf-voortgang { height: 3px; background: rgba(205, 202, 195, 0.25); }
.mf-voortgang span { display: block; height: 100%; background: var(--mf-oranje); }
.mf-stappen__foot--licht { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mf-space-4) var(--mf-space-5); }
.mf-stappen__foot--licht p { font-weight: 400; color: var(--mf-creme); }
.mf-fotosectie .mf-link { color: var(--mf-creme); }
@media (max-width: 860px) { .mf-glaskaarten { grid-template-columns: 1fr; } }

/* BLOK: aanbodkaarten--foto op zand */
.mf-page--donker .mf-bg-zand .mf-section-head p { color: var(--mf-grijsgroen); }
.mf-page--donker .mf-bg-zand .mf-aanbod__zakelijk { color: var(--mf-groen); }

/* BLOK: bewijs--blokjes — cijferblokjes + plek voor live Google-reviews */
.mf-blokjes { display: flex; flex-wrap: wrap; gap: var(--mf-space-2); margin: 0 0 var(--mf-space-5); padding: 0; list-style: none; }
.mf-blokje { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; background: var(--mf-zand-100); border: 1px solid var(--mf-zand-300); font-size: 0.95rem; font-weight: 400; }
.mf-blokje strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.mf-reviews-widget {
  display: grid; place-items: center; gap: 6px; min-height: 180px; padding: var(--mf-space-5);
  border: 1px dashed var(--mf-zand-300); background: var(--mf-creme); text-align: center;
}
.mf-reviews-widget p { max-width: 52ch; font-size: 0.95rem; color: var(--mf-grijsgroen); }
.mf-reviews-widget .mf-sterren { color: var(--mf-groen); letter-spacing: 0.2em; font-size: 1.1rem; }

/* Oranje vinkjes in lijsten op groen */
.mf-vinklijst { display: grid; gap: 10px; margin: var(--mf-space-2) 0 0; padding: 0; list-style: none; font-weight: 400; }
.mf-vinklijst li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.mf-vinklijst li::before { content: ""; width: 12px; height: 7px; border-left: 2px solid var(--mf-oranje); border-bottom: 2px solid var(--mf-oranje); transform: translateY(-3px) rotate(-45deg); }

/* Geruststellende regel onder de verzendknop */
.mf-form__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: var(--mf-fs-small); font-weight: 400; color: var(--mf-groen); }
.mf-form__trust span + span::before { content: "·"; margin-right: 12px; color: var(--mf-grijsgroen); }

/* FAQ op creme in variant donker */
.mf-page--donker .mf-bg-creme .mf-faq__item dd { color: var(--mf-grijsgroen); }
.mf-page--donker .mf-bg-zand .mf-label { color: var(--mf-grijsgroen); }
.mf-fotokaart, .mf-tegel { color: var(--mf-creme); }
.mf-page--donker .mf-hero--foto .mf-label { color: var(--mf-oranje); }

/* Hero-kop: vaste regelafbreking op grote schermen ("Personal training / in Delft voor wie / altijd aan staat.") */
.mf-br-lg { display: none; }
@media (min-width: 861px) {
  .mf-br-lg { display: inline; }
  .mf-hero--foto h1 { max-width: none; font-size: clamp(3rem, 1rem + 4.2vw, 4.75rem); line-height: 1; text-wrap: initial; }
}
@media (max-width: 860px) {
  .mf-br-lg { display: inline; }
  .mf-hero--foto h1 { max-width: none; font-size: min(8.4vw, 2.6rem); line-height: 1.02; text-wrap: initial; }
}

/* BLOK: herkenning--verhaal — tegels met oranje label, vette kop en korte tekst op een donker verloop */
.mf-tegels--verhaal .mf-tegel { aspect-ratio: auto; min-height: 600px; display: flex; align-items: flex-end; }
.mf-tegels--verhaal .mf-tegel img { filter: grayscale(1) contrast(0.92) brightness(0.92); }
.mf-tegels--verhaal .mf-tegel::after {
  background: linear-gradient(0deg, var(--mf-groen) 0%, rgba(52, 64, 58, 0.96) 36%, rgba(52, 64, 58, 0.6) 58%, rgba(52, 64, 58, 0) 78%);
}
.mf-tegel__body { position: relative; z-index: 1; display: grid; gap: var(--mf-space-2); padding: var(--mf-space-5) var(--mf-space-4) var(--mf-space-5); }
.mf-tegel__label { font-size: var(--mf-fs-label); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mf-oranje); }
.mf-tegel__body h3 { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); line-height: 1.15; color: var(--mf-creme); }
.mf-tegel__body p { position: static; padding: 0; font-size: 0.98rem; font-weight: 400; line-height: 1.55; color: var(--mf-steen); }
@media (max-width: 860px) {
  .mf-tegels--verhaal .mf-tegel { min-height: 480px; aspect-ratio: auto; }
}
/* Verhaaltegels: foto boven (±64%) loopt over in groen; tekstblokken starten op dezelfde hoogte */
.mf-tegels--verhaal .mf-tegel img { inset: 0 0 auto 0; height: 66%; filter: grayscale(1); }
.mf-tegels--verhaal .mf-tegel::after {
  background: linear-gradient(180deg, rgba(52, 64, 58, 0) 0%, rgba(52, 64, 58, 0) 40%, rgba(52, 64, 58, 0.75) 55%, var(--mf-groen) 66%);
}
.mf-tegels--verhaal .mf-tegel__body { width: 100%; min-height: 250px; align-content: start; }
@media (max-width: 860px) {
  .mf-tegels--verhaal .mf-tegel { min-height: 0; aspect-ratio: auto; display: grid; }
  .mf-tegels--verhaal .mf-tegel img { position: relative; height: 300px; }
  .mf-tegels--verhaal .mf-tegel::after { background: linear-gradient(180deg, rgba(52, 64, 58, 0) 0, rgba(52, 64, 58, 0) 160px, var(--mf-groen) 300px); }
  .mf-tegels--verhaal .mf-tegel__body { min-height: 0; margin-top: -60px; }
}
@media (min-width: 861px) { .mf-tegels--verhaal .mf-tegel__body { min-height: 300px; } }

/* BLOK: team — conclusie onder de lijst */
.mf-conclusie { display: grid; gap: var(--mf-space-2); padding: var(--mf-space-5); background: rgba(255, 250, 238, 0.06); border: 1px solid rgba(249, 179, 53, 0.45); }
.mf-conclusie .mf-label { margin: 0; color: var(--mf-oranje); }
.mf-conclusie__kop { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 800; line-height: 1.2; color: var(--mf-creme); }
.mf-conclusie p:not(.mf-conclusie__kop) { color: var(--mf-steen); }

/* ==========================================================================
   AANBOD — meer kleur (8 okt 2026)
   ========================================================================== */
/* Uitgelicht woord op creme/zand: oranje blok met groene tekst (brand guide) */
.mf-markeer { display: inline-block; padding: 0 0.18em; background: var(--mf-oranje); color: var(--mf-groen); line-height: 1.05; }

/* Badge: oranje blok met de schuine hoek van het logo (PriceBadge-vorm) */
.mf-badge {
  position: absolute; top: 0; right: 0; z-index: 3;
  padding: 10px 18px 10px 26px;
  background: var(--mf-oranje); color: var(--mf-groen);
  font-size: var(--mf-fs-label); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.06em;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
}

/* Fotokaart: oranje balk die groeit bij hover, kaart komt iets omhoog */
.mf-fotokaart { transition: transform var(--mf-dur) var(--mf-ease-out); }
.mf-fotokaart:hover { transform: translateY(-6px); }
.mf-fotokaart::before {
  content: ""; position: absolute; left: 0; bottom: 0; z-index: 3;
  width: 100%; height: 4px; background: var(--mf-oranje);
  transform: scaleX(0.18); transform-origin: left;
  transition: transform var(--mf-dur) var(--mf-ease-out);
}
.mf-fotokaart:hover::before { transform: scaleX(1); }
.mf-fotokaart__body h3 { font-size: clamp(1.4rem, 1.15rem + 0.7vw, 1.8rem); }
.mf-fotokaart:hover .mf-link { background-size: 100% 2px; gap: 12px; }

/* Aanbodsectie op zand: groen vlak achter de onderste helft van de kaarten voor meer contrast */
.mf-aanbod--accent { position: relative; }
.mf-aanbod--accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: var(--mf-groen); z-index: 0; }
.mf-aanbod--accent > .mf-container { position: relative; z-index: 1; }
.mf-aanbod--accent .mf-aanbod__zakelijk { color: var(--mf-creme); }
.mf-aanbod--accent .mf-aanbod__zakelijk a { color: var(--mf-oranje); }
@media (prefers-reduced-motion: reduce) { .mf-fotokaart:hover { transform: none; } }
.mf-page--donker .mf-bg-zand.mf-aanbod--accent .mf-aanbod__zakelijk { color: var(--mf-creme); margin-top: var(--mf-space-6); }

/* ==========================================================================
   STAPPEN — rustiger (8 okt 2026): oranje alleen nog op de knop;
   bovenkant loopt naadloos door uit het groene vlak van het aanbodblok
   ========================================================================== */
.mf-page--donker .mf-stappen--rustig .mf-label { color: var(--mf-steen); }
.mf-stappen--rustig .mf-fotosectie__bg::after {
  background: linear-gradient(180deg, var(--mf-groen) 0%, rgba(52, 64, 58, 0.82) 22%, rgba(52, 64, 58, 0.6) 55%, rgba(52, 64, 58, 0.92) 100%);
}
.mf-stappen--rustig .mf-glaskaart__label { color: var(--mf-steen); }
.mf-stappen--rustig .mf-glaskaart:hover { border-color: rgba(255, 250, 238, 0.55); }
.mf-stappen--rustig .mf-voortgang span { background: var(--mf-creme); }

/* Stappen: bij hover gloeit de kaart oranje op (label, rand, voortgangsbalk) */
.mf-stappen--rustig .mf-glaskaart { transition: transform var(--mf-dur) var(--mf-ease-out), border-color var(--mf-dur) var(--mf-ease), box-shadow var(--mf-dur) var(--mf-ease), background-color var(--mf-dur) var(--mf-ease); }
.mf-stappen--rustig .mf-glaskaart__label,
.mf-stappen--rustig .mf-voortgang span { transition: color var(--mf-dur) var(--mf-ease), background-color var(--mf-dur) var(--mf-ease); }
.mf-stappen--rustig .mf-glaskaart:hover {
  border-color: var(--mf-oranje);
  background: rgba(52, 64, 58, 0.82);
  box-shadow: 0 0 0 1px rgba(249, 179, 53, 0.35), 0 0 36px rgba(249, 179, 53, 0.22);
}
.mf-stappen--rustig .mf-glaskaart:hover .mf-glaskaart__label { color: var(--mf-oranje); }
.mf-stappen--rustig .mf-glaskaart:hover .mf-voortgang span { background: var(--mf-oranje); }

/* Formulier kort: drie velden */
.mf-form--kort { gap: var(--mf-space-4); align-self: center; }
.mf-form--kort .mf-form__note { text-align: center; }


/* ==========================================================================
   PRODUCTPAGINA'S (PT voor 1 e.v.) · 8 okt 2026
   ========================================================================== */
/* Vier stappen naast elkaar */
.mf-glaskaarten--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mf-glaskaarten--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mf-glaskaarten--4 { grid-template-columns: 1fr; } }

/* Vinkjeslijst, groter (wat je krijgt) */
.mf-vinklijst--groot { gap: 14px; font-size: 1.05rem; color: var(--mf-creme); border-top: 1px solid rgba(205, 202, 195, 0.3); padding-top: var(--mf-space-4); }

/* BLOK: combineren — smalle band op zand */
.mf-combineren { padding-block: var(--mf-space-7); }
.mf-combineren__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mf-space-4) var(--mf-space-7); align-items: center; }
.mf-combineren h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.mf-combineren__tekst { display: grid; gap: var(--mf-space-4); }
.mf-combineren__tekst p { color: var(--mf-grijsgroen); }
.mf-combineren__links { display: flex; flex-wrap: wrap; gap: var(--mf-space-3) var(--mf-space-5); }
@media (max-width: 860px) { .mf-combineren__grid { grid-template-columns: 1fr; } }

/* BLOK: inclusief — wat je krijgt (licht), met combineren eronder */
.mf-inclusief__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mf-space-6) var(--mf-space-7); align-items: start; }
.mf-inclusief__intro { display: grid; gap: var(--mf-space-3); }
.mf-inclusief__intro .mf-label { margin: 0; }
.mf-inclusief__intro p { color: var(--mf-grijsgroen); }
.mf-inclusief__foto { margin-top: var(--mf-space-3); overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; }
.mf-inclusief__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: grayscale(1); transition: transform var(--mf-dur-slow) var(--mf-ease-out); }
.mf-inclusief__foto:hover img { transform: scale(1.04); }
.mf-inclusief__lijst { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--mf-groen); }
.mf-inclusief__lijst li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--mf-zand-300); font-size: 1.02rem; color: var(--mf-grijsgroen); }
.mf-inclusief__lijst li strong { color: var(--mf-groen); }
.mf-inclusief__lijst li::before {
  content: ""; width: 28px; height: 28px; background: var(--mf-groen);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect width='28' height='28'/%3E%3C/svg%3E") center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14.5l4 4 8-9' fill='none' stroke='%23f9b335' stroke-width='2.5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.mf-inclusief__combi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mf-space-3) var(--mf-space-7); align-items: start; margin-top: var(--mf-space-7); padding-top: var(--mf-space-6); border-top: 1px solid var(--mf-groen); }
.mf-inclusief__combi h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.15; grid-row: span 2; }
.mf-inclusief__combi p { color: var(--mf-grijsgroen); }
@media (max-width: 860px) {
  .mf-inclusief__grid, .mf-inclusief__combi { grid-template-columns: 1fr; }
  .mf-inclusief__combi h3 { grid-row: auto; }
}

/* ==========================================================================
   BLOK: rooster (licht · creme) — Small Group-rooster als HTML (8 okt 2026)
   Elke dag is een kolom met een lijst lessen. Filterknoppen per lesvorm
   (data-les) zetten de andere lessen op de achtergrond. Werkt zonder JS ook:
   dan is gewoon het hele rooster zichtbaar.
   ========================================================================== */
.mf-rooster__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--mf-space-5); }
.mf-rooster__filter button {
  font: inherit; font-size: 0.875rem; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 10px 16px; border: 1px solid var(--mf-groen); background: transparent; color: var(--mf-groen); cursor: pointer;
  transition: background var(--mf-dur) var(--mf-ease), color var(--mf-dur) var(--mf-ease), transform var(--mf-dur) var(--mf-ease-out);
}
.mf-rooster__filter button:hover { transform: translateY(-1px); }
.mf-rooster__filter button[aria-pressed="true"] { background: var(--mf-groen); color: var(--mf-creme); }
.mf-rooster__filter button:focus-visible { outline: 2px solid var(--mf-oranje); outline-offset: 2px; }
.mf-rooster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--mf-space-3); }
.mf-rooster__dag { display: grid; align-content: start; gap: 8px; }
.mf-rooster__dag h3 { font-size: 0.8125rem; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mf-grijsgroen); padding-bottom: 10px; border-bottom: 1px solid var(--mf-groen); margin-bottom: 4px; }
.mf-rooster__dag ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mf-rooster__les { display: grid; gap: 2px; padding: 10px 12px; background: var(--mf-groen); color: var(--mf-creme); transition: opacity var(--mf-dur) var(--mf-ease), background var(--mf-dur) var(--mf-ease); }
.mf-rooster__les time { font-size: 0.8125rem; font-weight: 800; color: var(--mf-oranje); letter-spacing: 0.02em; }
.mf-rooster__les span { font-size: 0.95rem; font-weight: 400; }
.mf-rooster[data-filter]:not([data-filter="alles"]) .mf-rooster__les { opacity: 0.18; }
.mf-rooster[data-filter="fitcamp"] .mf-rooster__les[data-les="fitcamp"],
.mf-rooster[data-filter="powercamp"] .mf-rooster__les[data-les="powercamp"],
.mf-rooster[data-filter="hyrox"] .mf-rooster__les[data-les="hyrox"],
.mf-rooster[data-filter="boksen"] .mf-rooster__les[data-les="boksen"],
.mf-rooster[data-filter="yoga"] .mf-rooster__les[data-les="yoga"] { opacity: 1; }
.mf-rooster__noot { margin-top: var(--mf-space-5); font-size: 0.95rem; color: var(--mf-grijsgroen); }
@media (max-width: 1100px) { .mf-rooster { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--mf-space-5); } }
@media (max-width: 640px) { .mf-rooster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .mf-rooster__filter button:hover { transform: none; } }

/* ==========================================================================
   BLOK: vergelijking (licht · creme) — welke vorm past bij jou (8 okt 2026)
   Drie kolommen met dezelfde rijen. Op mobiel onder elkaar. Geen prijzen.
   ========================================================================== */
.mf-vergelijk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mf-space-3); margin: 0; padding: 0; list-style: none; }
.mf-vergelijk__kolom { display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--mf-groen); background: var(--mf-creme); transition: transform var(--mf-dur) var(--mf-ease-out), box-shadow var(--mf-dur) var(--mf-ease); }
.mf-vergelijk__kolom:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--mf-groen), 0 10px 30px -18px rgba(249, 179, 53, 0.9); }
.mf-vergelijk__kop { padding: var(--mf-space-4); background: var(--mf-groen); color: var(--mf-creme); display: grid; gap: 6px; }
.mf-vergelijk__kop span { font-size: 0.75rem; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mf-oranje); }
.mf-vergelijk__kop h3 { font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.7rem); }
.mf-vergelijk dl { margin: 0; padding: var(--mf-space-2) var(--mf-space-4); }
.mf-vergelijk dl > div { padding: 14px 0; border-bottom: 1px solid var(--mf-zand-300); }
.mf-vergelijk dl > div:last-child { border-bottom: 0; }
.mf-vergelijk dt { font-size: 0.75rem; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mf-grijsgroen); margin-bottom: 4px; }
.mf-vergelijk dd { margin: 0; color: var(--mf-groen); font-size: 1rem; }
.mf-vergelijk__voet { padding: 0 var(--mf-space-4) var(--mf-space-4); }
@media (max-width: 900px) { .mf-vergelijk { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mf-vergelijk__kolom:hover { transform: none; } }

/* Combinaties (donker): drie voorbeeldblokken, zelfde stijl als mf-conclusie */
.mf-combis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mf-space-3); margin: 0; padding: 0; list-style: none; }
.mf-combis .mf-conclusie { align-content: start; height: 100%; }
@media (max-width: 900px) { .mf-combis { grid-template-columns: 1fr; } }
.mf-page--donker .mf-combi .mf-section-head p { color: var(--mf-steen); }

/* Combinaties: rustig in rust, bij hover omhoog en oranje gloed (zelfde gedrag als de stappenkaarten op de homepage) */
.mf-combis .mf-conclusie {
  border-color: rgba(255, 250, 238, 0.18);
  transition: transform var(--mf-dur) var(--mf-ease-out), border-color var(--mf-dur) var(--mf-ease), box-shadow var(--mf-dur) var(--mf-ease), background-color var(--mf-dur) var(--mf-ease);
}
.mf-combis .mf-conclusie .mf-label { color: var(--mf-steen); transition: color var(--mf-dur) var(--mf-ease); }
.mf-combis .mf-conclusie:hover {
  transform: translateY(-4px);
  border-color: var(--mf-oranje);
  background: rgba(52, 64, 58, 0.82);
  box-shadow: 0 0 0 1px rgba(249, 179, 53, 0.35), 0 0 36px rgba(249, 179, 53, 0.22);
}
.mf-combis .mf-conclusie:hover .mf-label { color: var(--mf-oranje); }
@media (prefers-reduced-motion: reduce) { .mf-combis .mf-conclusie:hover { transform: none; } }

/* ==========================================================================
   BLOK: intake (licht · creme) — de vijf onderdelen van de gratis intake (8 okt 2026)
   Genummerde rij; op tablet 2 kolommen, op mobiel onder elkaar.
   Bij hover komt het blok iets omhoog en kleurt de bovenrand oranje.
   ========================================================================== */
.mf-intake { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--mf-space-3); margin: 0; padding: 0; list-style: none; counter-reset: intake; }
.mf-intake li { counter-increment: intake; display: grid; align-content: start; gap: 10px; padding: var(--mf-space-4) var(--mf-space-3) var(--mf-space-4) 0; border-top: 2px solid var(--mf-groen); transition: transform var(--mf-dur) var(--mf-ease-out), border-color var(--mf-dur) var(--mf-ease); }
.mf-intake li::before { content: counter(intake, decimal-leading-zero); font-size: 2.4rem; font-weight: 800; font-style: italic; line-height: 1; color: var(--mf-groen); transition: color var(--mf-dur) var(--mf-ease); }
.mf-intake h3 { font-size: 1.15rem; }
.mf-intake p { font-size: 0.98rem; color: var(--mf-grijsgroen); }
.mf-intake li:hover { transform: translateY(-4px); border-top-color: var(--mf-oranje); }
.mf-intake li:hover::before { color: var(--mf-oranje); }
.mf-intake__voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mf-space-4); margin-top: var(--mf-space-6); padding-top: var(--mf-space-5); border-top: 1px solid var(--mf-groen); }
.mf-intake__voet p { font-size: var(--mf-fs-h3); font-weight: 800; line-height: 1.3; }
@media (max-width: 1100px) { .mf-intake { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mf-intake { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mf-intake li:hover { transform: none; } }

/* Meetkaarten: zelfde kaart als de vergelijking, met alleen een tekstblok */
.mf-vergelijk__tekst { padding: var(--mf-space-4); display: grid; gap: var(--mf-space-2); }
.mf-vergelijk__tekst p { color: var(--mf-grijsgroen); }
.mf-noot { margin-top: var(--mf-space-5); max-width: 62ch; color: var(--mf-grijsgroen); }

/* ==========================================================================
   OVER ONS (8 okt 2026)
   ========================================================================== */
/* Ons verhaal: tekst in twee kolommen met een grote openingszin */
.mf-verhaal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mf-space-5) var(--mf-space-7); align-items: start; }
.mf-verhaal__tekst { display: grid; gap: var(--mf-space-3); }
.mf-verhaal__tekst p { color: var(--mf-grijsgroen); font-size: 1.05rem; }
.mf-verhaal__tekst p:first-child { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); font-weight: 800; line-height: 1.3; color: var(--mf-groen); }
@media (max-width: 860px) { .mf-verhaal { grid-template-columns: 1fr; } }

/* Kaarten in twee kolommen (waar we voor staan) */
.mf-combis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .mf-combis--2 { grid-template-columns: 1fr; } }

/* Schijf van Vijf: schijf links, vijf onderdelen rechts. Hover op een onderdeel licht het stuk in de schijf oranje op (en andersom). */
.mf-schijf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mf-space-6) var(--mf-space-7); align-items: center; }
.mf-schijf__beeld svg { width: 100%; max-width: 460px; height: auto; display: block; margin-inline: auto; }
.mf-schijf__deel { transition: fill var(--mf-dur) var(--mf-ease), transform var(--mf-dur) var(--mf-ease-out); transform-origin: 200px 200px; cursor: default; }
.mf-schijf__deel.is-actief { fill: var(--mf-oranje); transform: scale(1.03); }
.mf-schijf__label { font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: 0.04em; pointer-events: none; }
.mf-schijf__ring { font-family: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; fill: var(--mf-groen); }
.mf-schijf__lijst { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--mf-groen); }
.mf-schijf__lijst li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--mf-zand-300); transition: background-color var(--mf-dur) var(--mf-ease); }
.mf-schijf__lijst li::before { content: ""; width: 18px; height: 18px; margin-top: 4px; background: var(--kleur, var(--mf-groen)); transition: background-color var(--mf-dur) var(--mf-ease); }
.mf-schijf__lijst h3 { font-size: 1.1rem; margin-bottom: 4px; }
.mf-schijf__lijst p { color: var(--mf-grijsgroen); font-size: 1rem; }
.mf-schijf__lijst li.is-actief::before { background: var(--mf-oranje); }
@media (max-width: 860px) { .mf-schijf { grid-template-columns: 1fr; } .mf-schijf__beeld svg { max-width: 340px; } }
@media (prefers-reduced-motion: reduce) { .mf-schijf__deel.is-actief { transform: none; } }

/* Team: portretten met naam en rol, op donker. Hover: omhoog en oranje rand. */
.mf-teamgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mf-space-3); margin: 0; padding: 0; list-style: none; }
.mf-teamkaart { display: grid; grid-template-rows: auto 1fr; border: 1px solid rgba(255, 250, 238, 0.18); background: rgba(255, 250, 238, 0.04); transition: transform var(--mf-dur) var(--mf-ease-out), border-color var(--mf-dur) var(--mf-ease), box-shadow var(--mf-dur) var(--mf-ease); }
.mf-teamkaart__foto { aspect-ratio: 4 / 5; overflow: hidden; background: #3e4c44; display: grid; place-items: center; }
.mf-teamkaart__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1); transition: transform var(--mf-dur-slow) var(--mf-ease-out); }
.mf-teamkaart__foto span { font-size: 3.5rem; font-weight: 800; font-style: italic; color: rgba(255, 250, 238, 0.25); }
.mf-teamkaart__body { padding: var(--mf-space-3) var(--mf-space-3) var(--mf-space-4); display: grid; gap: 4px; align-content: start; }
.mf-teamkaart__body h3 { font-size: 1.15rem; color: var(--mf-creme); }
.mf-teamkaart__body p { font-size: 0.75rem; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mf-steen); transition: color var(--mf-dur) var(--mf-ease); }
.mf-teamkaart:hover { transform: translateY(-4px); border-color: var(--mf-oranje); box-shadow: 0 0 0 1px rgba(249, 179, 53, 0.35), 0 0 36px rgba(249, 179, 53, 0.22); }
.mf-teamkaart:hover .mf-teamkaart__body p { color: var(--mf-oranje); }
.mf-teamkaart:hover img { transform: scale(1.04); }
.mf-teamkaart--partner .mf-teamkaart__foto span { font-size: 1rem; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mf-steen); padding: 0 var(--mf-space-3); text-align: center; }
@media (max-width: 1000px) { .mf-teamgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .mf-teamgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .mf-teamkaart:hover { transform: none; } }
.mf-page--donker .mf-team-sectie .mf-section-head p { color: var(--mf-steen); }

/* Partnerkaart met logo (fysio): logo in eigen kleuren op creme, kaart is een link */
.mf-teamkaart--logo .mf-teamkaart__foto { background: var(--mf-creme); padding: var(--mf-space-4); }
.mf-teamkaart--logo .mf-teamkaart__foto img { object-fit: contain; object-position: 50% 50%; filter: none; }
.mf-teamkaart--logo a { color: inherit; text-decoration: none; display: grid; grid-template-rows: auto 1fr; height: 100%; }
.mf-teamkaart--logo .mf-teamkaart__link { margin-top: 6px; font-size: 0.875rem; font-weight: 800; color: var(--mf-creme); }
.mf-teamkaart--logo:hover .mf-teamkaart__link { color: var(--mf-oranje); }

/* Intake-rij met drie items (Bedrijven: herkenning) */
.mf-intake--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .mf-intake--3 { grid-template-columns: 1fr; } }

/* ==========================================================================
   CONTACT (8 okt 2026)
   ========================================================================== */
.mf-vergelijk__tekst a { color: var(--mf-groen); font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--mf-oranje); }
.mf-vergelijk__tekst a:hover { color: var(--mf-grijsgroen); }
.mf-vergelijk__groot { font-size: 1.2rem; font-weight: 800; color: var(--mf-groen); }
.mf-bezoek { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mf-space-6) var(--mf-space-7); align-items: start; }
.mf-uren { width: 100%; border-collapse: collapse; border-top: 1px solid var(--mf-groen); }
.mf-uren th, .mf-uren td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--mf-zand-300); font-size: 1.02rem; }
.mf-uren th { font-weight: 800; color: var(--mf-groen); }
.mf-uren td { color: var(--mf-grijsgroen); text-align: right; font-variant-numeric: tabular-nums; }
.mf-uren tr.is-vandaag th, .mf-uren tr.is-vandaag td { color: var(--mf-groen); }
.mf-uren tr.is-vandaag th::after { content: "Vandaag"; margin-left: 10px; padding: 2px 8px; font-size: 0.7rem; font-style: italic; text-transform: uppercase; letter-spacing: 0.08em; background: var(--mf-oranje); color: var(--mf-groen); }
.mf-route { display: grid; gap: var(--mf-space-3); }
.mf-route__kaart { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--mf-groen); }
.mf-route__kaart img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.mf-route__kaart span { position: absolute; left: var(--mf-space-3); bottom: var(--mf-space-3); padding: 8px 12px; background: var(--mf-groen); color: var(--mf-creme); font-weight: 800; font-size: 0.9rem; }
@media (max-width: 860px) { .mf-bezoek { grid-template-columns: 1fr; } }

/* ==========================================================================
   KLANTVERHALEN (8 okt 2026): verhalen als rijen, foto en tekst wisselen van kant
   ========================================================================== */
.mf-verhalen { display: grid; gap: var(--mf-space-7); margin: 0; padding: 0; list-style: none; }
.mf-verhaalrij { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mf-space-5) var(--mf-space-7); align-items: center; }
.mf-verhaalrij:nth-child(even) .mf-verhaalrij__foto { order: 2; }
.mf-verhaalrij__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mf-zand-200); display: grid; place-items: center; }
.mf-verhaalrij__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform var(--mf-dur-slow) var(--mf-ease-out); }
.mf-verhaalrij:hover .mf-verhaalrij__foto img { transform: scale(1.04); }
.mf-verhaalrij__leeg { font-size: 5rem; font-weight: 800; font-style: italic; color: var(--mf-zand-300); }
.mf-verhaalrij__foto .mf-badge { z-index: 1; }
.mf-verhaalrij__tekst { display: grid; gap: var(--mf-space-3); }
.mf-verhaalrij__tekst h3 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.3rem); line-height: 1.1; }
.mf-verhaalrij__stappen { margin: 0; display: grid; gap: 10px; }
.mf-verhaalrij__stappen div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding-top: 10px; border-top: 1px solid var(--mf-zand-300); }
.mf-verhaalrij__stappen dt { font-size: 0.75rem; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mf-grijsgroen); padding-top: 3px; }
.mf-verhaalrij__stappen dd { margin: 0; color: var(--mf-groen); }
.mf-citaat { margin: var(--mf-space-2) 0 0; padding: var(--mf-space-3) var(--mf-space-4); border-left: 4px solid var(--mf-oranje); background: var(--mf-zand-100, #f6f2e8); }
.mf-citaat p { font-size: 1.15rem; font-weight: 800; font-style: italic; line-height: 1.4; color: var(--mf-groen); }
.mf-citaat footer { margin-top: 6px; font-size: 0.875rem; color: var(--mf-grijsgroen); }
@media (max-width: 860px) {
  .mf-verhaalrij { grid-template-columns: 1fr; }
  .mf-verhaalrij:nth-child(even) .mf-verhaalrij__foto { order: 0; }
  .mf-verhaalrij__foto { aspect-ratio: 4 / 3; }
  .mf-verhaalrij__stappen div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .mf-verhaalrij:hover .mf-verhaalrij__foto img { transform: none; } }

/* ==========================================================================
   MYROX (eventpagina, 8 okt 2026)
   ========================================================================== */
.mf-intake--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mf-intake--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mf-intake--4 { grid-template-columns: 1fr; } }
.mf-intake__run { font-size: 0.75rem; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mf-grijsgroen); }
.mf-buddy[hidden] { display: none; }
.mf-buddy { display: grid; gap: var(--mf-space-3); padding: var(--mf-space-3); border-left: 3px solid var(--mf-oranje); background: var(--mf-zand-100); }
.mf-buddy p { font-size: var(--mf-fs-small); color: var(--mf-grijsgroen); }

/* ==========================================================================
   LANDINGSPAGINA'S (8 okt 2026): eigen header zonder menu, één actie
   ========================================================================== */
.mf-header--lp .mf-header__inner { justify-content: space-between; }
.mf-header--lp .mf-btn { padding-inline: 18px; }
.mf-footer--lp .mf-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--mf-space-3); padding-block: var(--mf-space-5); font-size: var(--mf-fs-small); color: var(--mf-steen); }
.mf-footer--lp a { color: var(--mf-creme); }
/* Bezwaren: grote vraag links, antwoord rechts */
.mf-bezwaren { display: grid; gap: var(--mf-space-5); margin: 0; padding: 0; list-style: none; }
.mf-bezwaar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mf-space-3) var(--mf-space-7); padding-top: var(--mf-space-4); border-top: 1px solid var(--mf-groen); }
.mf-bezwaar h3 { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); font-style: italic; line-height: 1.2; }
.mf-bezwaar p { color: var(--mf-grijsgroen); font-size: 1.05rem; }
@media (max-width: 860px) { .mf-bezwaar { grid-template-columns: 1fr; } }

/* Wat je krijgt op donker: foto als achtergrond met groen eroverheen (landingspagina's) */
.mf-inclusief--donker .mf-fotosectie__bg img { object-position: var(--bg-pos, 50% 40%); }
.mf-inclusief--donker .mf-fotosectie__bg::after { background: linear-gradient(90deg, rgba(52, 64, 58, 0.96) 0%, rgba(52, 64, 58, 0.88) 45%, rgba(52, 64, 58, 0.72) 100%); }
.mf-inclusief--donker .mf-inclusief__intro p { color: var(--mf-steen); }
.mf-inclusief--donker .mf-inclusief__lijst { border-top-color: rgba(255, 250, 238, 0.35); }
.mf-inclusief--donker .mf-inclusief__lijst li { border-bottom-color: rgba(255, 250, 238, 0.14); color: var(--mf-steen); }
.mf-inclusief--donker .mf-inclusief__lijst li strong { color: var(--mf-creme); }
.mf-inclusief--donker .mf-inclusief__lijst li::before { background-color: rgba(255, 250, 238, 0.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14.5l4 4 8-9' fill='none' stroke='%23f9b335' stroke-width='2.5'/%3E%3C/svg%3E"); }
.mf-page--donker .mf-inclusief--donker .mf-label { color: var(--mf-oranje); }

/* Wat je krijgt in een lichte, zachtere uitvoering (landingspagina De werkende vrouw): zelfde opbouw, op zand */
.mf-team--licht { background: var(--mf-zand-100); color: var(--mf-groen); }
.mf-team--licht .mf-team__media::after { background: linear-gradient(270deg, var(--mf-zand-100) 0%, rgba(240, 235, 223, 0) 40%); }
.mf-team--licht .mf-team__body > p { color: var(--mf-grijsgroen); }
.mf-page--donker .mf-team--licht .mf-label { color: var(--mf-grijsgroen); }
.mf-team--licht .mf-lijst, .mf-team--licht .mf-lijst li { border-color: var(--mf-zand-300); }
.mf-team--licht .mf-lijst h3 { color: var(--mf-groen); }
.mf-team--licht .mf-lijst p { color: var(--mf-grijsgroen); }
@media (max-width: 960px) { .mf-team--licht .mf-team__media::after { background: linear-gradient(0deg, var(--mf-zand-100) 0%, rgba(240, 235, 223, 0) 40%); } }

/* I'mpossible: volledige, originele verhalen. Foto blijft staan tijdens het lezen (desktop). */
.mf-verhaalrij--vol { align-items: start; }
.mf-verhaalrij--vol .mf-verhaalrij__foto { position: sticky; top: 110px; }
.mf-verhaalrij__origineel { display: grid; gap: var(--mf-space-3); padding-left: var(--mf-space-4); border-left: 4px solid var(--mf-oranje); }
.mf-verhaalrij__origineel p { color: var(--mf-grijsgroen); font-size: 1.02rem; line-height: 1.7; }
@media (max-width: 860px) { .mf-verhaalrij--vol .mf-verhaalrij__foto { position: relative; top: 0; } }

/* ==========================================================================
   LANDINGSPAGINA GRATIS START (13 okt 2026): actieblokken in de hero
   Twee gelijke oranje blokken met de schuine hoek van het logo (zoals mf-badge).
   De weken zijn het grootste element; geen van beide blokken is uitgelicht.
   ========================================================================== */
.mf-deal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mf-space-3); max-width: 640px; margin: var(--mf-space-2) 0 0; padding: 0; list-style: none; }
.mf-deal li { display: grid; gap: 2px; align-content: start; padding: 16px 20px 16px 26px; background: var(--mf-oranje); color: var(--mf-groen); clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); transition: transform var(--mf-dur) var(--mf-ease-out); }
.mf-deal li:hover { transform: translateY(-3px); }
.mf-deal strong { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; }
.mf-deal span { font-size: 1.05rem; font-weight: 800; }
.mf-deal small { font-size: var(--mf-fs-small); font-weight: 400; }
@media (max-width: 560px) { .mf-deal { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mf-deal li:hover { transform: none; } }