/* =============================================
   FlexiTrainer — publieke site
   =============================================
   Donkere hero, lichte inhoud, groen als enige accent. Bewust weinig JavaScript: een
   marketingpagina die op een telefoon aan de rand van een voetbalveld moet laden, heeft
   meer aan snelheid dan aan animaties. */

:root { --mk-navy: #101c40; --mk-navy-soft: #17265180; }
.mk-body { margin: 0; background: #fff; color: #16203d;
           font-family: "Inter", system-ui, -apple-system, sans-serif;
           -webkit-font-smoothing: antialiased; line-height: 1.6; }

.mk-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
.mk-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.94);
             backdrop-filter: blur(8px); border-bottom: 1px solid #e6ebe7; }
.mk-header-inner { display: flex; align-items: center; gap: 28px; height: 66px; }
.mk-logo { display: flex; align-items: center; gap: 9px; text-decoration: none;
           font-weight: 800; font-size: 18px; letter-spacing: -.025em; color: #0f1b16; }
.mk-nav { display: flex; gap: 26px; margin-right: auto; }
.mk-nav a { text-decoration: none; color: #48584f; font-size: 14.5px; font-weight: 500; }
.mk-nav a:hover, .mk-nav a[aria-current="page"] { color: #0f1b16; }
.mk-actions { display: flex; align-items: center; gap: 14px; }
.mk-link { text-decoration: none; color: #0f1b16; font-size: 14.5px; font-weight: 600; }
.mk-burger { display: none; width: 38px; height: 38px; border: 1px solid #e6ebe7; border-radius: 8px;
             background: #fff; color: #0f1b16; place-items: center; cursor: pointer; }
.mk-burger svg { width: 19px; height: 19px; }
.mk-logo-img { height: 34px; width: auto; display: block; }
.mk-logo-img--footer { height: 32px; filter: brightness(0) invert(1); opacity: .95; }

/* ---------- hero ---------- */
.mk-hero { background: var(--mk-navy); color: #fff; padding: 76px 0 68px; position: relative; overflow: hidden; }
.mk-hero::after { content: ""; position: absolute; inset: 0;
                  background: radial-gradient(70% 100% at 78% 30%, rgba(31,160,56,.20), transparent 62%);
                  pointer-events: none; }

/* Met foto: de coach staat rechts in beeld, dus de overlay loopt van links donker naar
   rechts doorzichtig. Zo blijft de tekst leesbaar zonder de foto plat te drukken. */
/* Het focuspunt verschilt per foto: staat het hoofd hoog in beeld, dan snijdt een
   uitsnede op het midden het er precies af. Elke pagina zet daarom zijn eigen --focus. */
.mk-hero--photo { background-size: cover;
                  background-position: var(--focus, center right);
                  padding: 108px 0 96px; }
.mk-hero--photo::after {
  background: linear-gradient(100deg,
    rgba(16,28,64,.94) 0%, rgba(16,28,64,.86) 34%,
    rgba(16,28,64,.55) 58%, rgba(16,28,64,.18) 100%);
}
.mk-hero--photo .mk-hero-copy > * { max-width: 600px; }
@media (max-width: 900px) {
  /* Op een smal scherm valt de coach buiten beeld en wordt de overlay bijna vlak — anders
     staat witte tekst op een lichtgroen veld. */
  .mk-hero--photo { padding: 64px 0 56px; background-position: var(--focus-mobiel, 72% center); }
  .mk-hero--photo::after { background: linear-gradient(180deg, rgba(16,28,64,.90), rgba(16,28,64,.93)); }
}
/* De hero-inhoud lijnt uit met de linkerrand van de container, niet met het midden van het
   scherm. Eerder stond max-width op hetzelfde element als .mk-wrap, en die heeft margin:0 auto
   — waardoor de tekst gecentreerd werd en niet meer onder het logo begon. */
.mk-hero-inner { position: relative; z-index: 1; }
.mk-hero-copy > * { max-width: 640px; }

.mk-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
@media (max-width: 900px) { .mk-hero-grid { grid-template-columns: 1fr; gap: 34px; } }

/* ---------- beeldplaatshouders ----------
   Zichtbaar gemarkeerd met de gewenste afmeting erin, zodat duidelijk is wat er moet komen
   en niemand per ongeluk met een lege plek gaat live. */
.mk-media { position: relative; border-radius: 14px; overflow: hidden;
            background: #eef2ef; border: 2px dashed #c3d0c8;
            display: grid; place-items: center; text-align: center; padding: 24px; }
.mk-media--hero { aspect-ratio: 4/3; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.22); }
.mk-media--wide { aspect-ratio: 16/9; }
.mk-media--tall { aspect-ratio: 3/4; }
.mk-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-media-note { font-size: 13px; line-height: 1.5; color: #6b7c72; max-width: 30ch; }
.mk-media-note strong { display: block; font-size: 14px; color: #3d4d44; margin-bottom: 4px; }
.mk-media-note code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px;
                      background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 4px; }
.mk-media--hero .mk-media-note { color: #9fb3a7; }
.mk-media--hero .mk-media-note strong { color: #dfe9e3; }
.mk-media--hero .mk-media-note code { background: rgba(255,255,255,.1); color: #cfe0d6; }
.mk-media svg { width: 26px; height: 26px; color: #9fb3a7; margin-bottom: 10px; }

/* ---------- tekst met kolom ernaast ----------
   De regellengte blijft leesbaar, maar de pagina benut de volle breedte in plaats van een
   smalle kolom met veel wit ernaast. */
.mk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
@media (max-width: 960px) { .mk-layout { grid-template-columns: 1fr; gap: 32px; } }
.mk-aside { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }
.mk-aside-card { background: #f5f8f6; border: 1px solid #e6ebe7; border-radius: 12px; padding: 22px; }
.mk-aside-card h3 { font-size: 15px; font-weight: 700; margin: 0 0 12px; letter-spacing: -.01em; }
.mk-aside-card p { font-size: 14px; line-height: 1.6; color: #48584f; margin: 0 0 10px; }
.mk-aside-card p:last-child { margin: 0; }
.mk-aside-card dl { margin: 0; }
.mk-aside-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
                border-bottom: 1px solid #e6ebe7; font-size: 14px; }
.mk-aside-row:last-child { border-bottom: none; }
.mk-aside-row dt { color: #6b7c72; }
.mk-aside-row dd { margin: 0; font-weight: 600; text-align: right; }
.mk-hero h1 { font-size: clamp(34px, 5.4vw, 56px); line-height: 1.08; letter-spacing: -.035em;
              font-weight: 800; margin: 0 0 20px; text-wrap: balance; }
.mk-hero h1 em { font-style: normal; color: #4ade80; }
.mk-hero p.lead { font-size: clamp(16.5px, 2vw, 19px); line-height: 1.55; color: #c3cde0;
                  margin: 0 0 30px; max-width: 56ch; }
.mk-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.mk-hero .ft-btn--ghost { border-color: rgba(255,255,255,.28); color: #fff; }
.mk-hero .ft-btn--ghost:hover { background: rgba(255,255,255,.08); }

.mk-trust { display: flex; gap: 26px; flex-wrap: wrap; position: relative; z-index: 1; }
.mk-trust span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #b6c1d6; }
.mk-trust svg { width: 16px; height: 16px; color: #4ade80; flex-shrink: 0; }

/* ---------- secties ---------- */
.mk-section { padding: 72px 0; }
.mk-section--tint { background: #f5f8f6; }
.mk-section--dark { background: var(--mk-navy); color: #fff; }

.mk-head { max-width: 640px; margin: 0 0 40px; }
.mk-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.mk-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
              color: var(--sl-primary); margin: 0 0 12px; }
.mk-head h2 { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.15; letter-spacing: -.028em;
              font-weight: 800; margin: 0 0 14px; text-wrap: balance; }
.mk-head p { font-size: 17px; line-height: 1.6; color: #48584f; margin: 0; }
.mk-section--dark .mk-head p { color: #b9c7bf; }

/* ---------- stappen ---------- */
.mk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: mk; }
.mk-step { counter-increment: mk; background: #fff; border: 1px solid #e6ebe7;
           border-radius: 12px; padding: 24px 22px; }
.mk-step::before { content: counter(mk); display: grid; place-items: center;
                   width: 30px; height: 30px; border-radius: 9px; margin-bottom: 14px;
                   background: var(--sl-primary); color: #fff; font-weight: 700; font-size: 14px; }
.mk-step h3 { font-size: 16.5px; font-weight: 700; margin: 0 0 7px; letter-spacing: -.015em; }
.mk-step p  { font-size: 14.5px; line-height: 1.55; color: #48584f; margin: 0; }
@media (max-width: 900px) { .mk-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mk-steps { grid-template-columns: 1fr; } }

/* ---------- twee doelgroepen ---------- */
.mk-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) { .mk-split { grid-template-columns: 1fr; } }
.mk-card { background: #fff; border: 1px solid #e6ebe7; border-radius: 14px; padding: 32px; }
.mk-card h3 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; }
.mk-card > p { font-size: 15.5px; line-height: 1.6; color: #48584f; margin: 0 0 20px; }
.mk-list { list-style: none; padding: 0; margin: 0 0 24px; }
.mk-list li { position: relative; padding-left: 28px; margin-bottom: 11px;
              font-size: 15px; line-height: 1.55; color: #2c3b33; }
.mk-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 17px; height: 17px;
                      border-radius: 50%; background: #dcf3e4; }
.mk-list li::after { content: ""; position: absolute; left: 5px; top: 11px; width: 7px; height: 4px;
                     border-left: 2px solid var(--sl-accent); border-bottom: 2px solid var(--sl-accent);
                     transform: rotate(-45deg); }

/* ---------- cijfers ---------- */
.mk-figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
              background: #e6ebe7; border: 1px solid #e6ebe7; border-radius: 12px; overflow: hidden; }
.mk-figure { background: #fff; padding: 26px 22px; }
.mk-figure b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.03em;
               line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.mk-figure span { font-size: 14px; color: #48584f; line-height: 1.45; display: block; }
@media (max-width: 820px) { .mk-figures { grid-template-columns: 1fr 1fr; } }

/* ---------- prijstabel ---------- */
.mk-table-wrap { overflow-x: auto; border: 1px solid #e6ebe7; border-radius: 12px; background: #fff; }
.mk-table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 15px; }
.mk-table th, .mk-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid #eef2ef;
                             font-variant-numeric: tabular-nums; }
.mk-table th { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
               color: #6b7c72; background: #f8faf9; }
.mk-table tbody tr:last-child td { border-bottom: none; }
.mk-table td:not(:first-child) { text-align: right; }
.mk-table th:not(:first-child) { text-align: right; }
.mk-table .is-total td { font-weight: 700; background: #f5f8f6; }

/* ---------- FAQ ---------- */
.mk-faq { max-width: 780px; }
.mk-faq details { border-bottom: 1px solid #e6ebe7; }
.mk-faq summary { cursor: pointer; padding: 20px 34px 20px 0; position: relative;
                  font-size: 17px; font-weight: 600; letter-spacing: -.015em; list-style: none; }
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after { content: ""; position: absolute; right: 6px; top: 27px;
                         width: 9px; height: 9px; border-right: 2px solid #6b7c72;
                         border-bottom: 2px solid #6b7c72; transform: rotate(45deg);
                         transition: transform .18s; }
.mk-faq details[open] summary::after { transform: rotate(-135deg); top: 31px; }
.mk-faq .answer { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: #3d4d44; max-width: 68ch; }
.mk-faq .answer p { margin: 0 0 12px; }
.mk-faq .answer p:last-child { margin: 0; }

/* ---------- CTA-band ---------- */
.mk-cta { background: var(--mk-navy); color: #fff; border-radius: 16px; padding: 48px 44px;
          display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.mk-cta h2 { font-size: clamp(23px, 3vw, 31px); line-height: 1.2; letter-spacing: -.028em;
             font-weight: 800; margin: 0 0 8px; max-width: 20ch; }
.mk-cta p { font-size: 15.5px; color: #c3cde0; margin: 0; max-width: 46ch; }
.mk-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mk-cta .ft-btn--ghost { border-color: rgba(255,255,255,.28); color: #fff; }

/* ---------- kenmerken ---------- */
.mk-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .mk-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mk-features { grid-template-columns: 1fr; } }
.mk-feature svg { width: 22px; height: 22px; color: var(--sl-primary); margin-bottom: 12px; }
.mk-feature h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.015em; }
.mk-feature p { font-size: 14.5px; line-height: 1.55; color: #48584f; margin: 0; }

/* ---------- prose ---------- */
.mk-prose { max-width: 72ch; }
.mk-prose h2 { font-size: 26px; font-weight: 800; letter-spacing: -.025em; margin: 42px 0 14px; }
.mk-prose h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 30px 0 10px; }
.mk-prose p  { font-size: 16.5px; line-height: 1.7; color: #2c3b33; margin: 0 0 16px; }
.mk-prose ul { padding-left: 0; list-style: none; margin: 0 0 20px; }
.mk-prose ul li { position: relative; padding-left: 22px; margin-bottom: 9px;
                  font-size: 16px; line-height: 1.6; color: #2c3b33; }
.mk-prose ul li::before { content: ""; position: absolute; left: 2px; top: 12px;
                          width: 7px; height: 2px; background: var(--sl-primary); }
.mk-prose strong { font-weight: 700; color: #0f1b16; }
.mk-prose a { color: var(--sl-accent); }

/* Kort feitenblok bovenaan een pagina. Dit is het stuk dat een antwoordmachine overneemt
   wanneer iemand vraagt wat dit kost of hoe het werkt — dus concreet en met getallen. */
.mk-answer { background: #f5f8f6; border-left: 3px solid var(--sl-primary);
             border-radius: 0 10px 10px 0; padding: 20px 24px; margin: 0 0 34px; }
.mk-answer p { font-size: 16px; line-height: 1.65; color: #2c3b33; margin: 0 0 10px; }
.mk-answer p:last-child { margin: 0; }
.mk-answer strong { color: #0f1b16; }
.mk-updated { font-size: 13px; color: #6b7c72; margin: 26px 0 0; }

/* ---------- regio-links ---------- */
.mk-regions { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-regions a { display: inline-block; padding: 9px 16px; border: 1px solid #e6ebe7;
                border-radius: 999px; text-decoration: none; font-size: 14.5px;
                font-weight: 500; color: #2c3b33; background: #fff; }
.mk-regions a:hover { border-color: var(--sl-primary); color: var(--sl-accent); }

/* ---------- footer ---------- */
.mk-footer { background: var(--mk-navy); color: #a8b4cc; padding: 56px 0 30px; margin-top: 0; }
.mk-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 36px; }
@media (max-width: 820px) { .mk-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .mk-footer-grid { grid-template-columns: 1fr; } }
.mk-logo--footer { color: #fff; margin-bottom: 14px; }
.mk-footer-grid > div > p { font-size: 14.5px; line-height: 1.6; margin: 0; max-width: 38ch; }
.mk-footer h3 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                color: #fff; margin: 0 0 14px; }
.mk-footer-grid a { display: block; text-decoration: none; color: #9fb3a7;
                    font-size: 14.5px; margin-bottom: 9px; }
.mk-footer-grid a:hover { color: #fff; }
.mk-footer-grid a { color: #a8b4cc; }
.mk-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px;
                    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
                    font-size: 13.5px; }
.mk-footer-bottom p { margin: 0; }
.mk-footer-bottom a { color: #9fb3a7; text-decoration: none; margin-left: 20px; }
.mk-footer-bottom a:first-child { margin-left: 0; }
.mk-footer-bottom a:hover { color: #fff; }

/* ---------- mobiel ---------- */
@media (max-width: 900px) {
  .mk-burger { display: grid; }
  .mk-nav { position: absolute; top: 66px; left: 0; right: 0; background: #fff;
            border-bottom: 1px solid #e6ebe7; flex-direction: column; gap: 0;
            padding: 8px 24px 16px; display: none; }
  .mk-nav.is-open { display: flex; }
  .mk-nav a { padding: 11px 0; font-size: 16px; }
  .mk-actions .mk-link { display: none; }
  .mk-hero { padding: 52px 0 46px; }
  .mk-section { padding: 52px 0; }
  .mk-cta { padding: 34px 26px; }
}

/* ---------- meldingen ----------
   De publieke layout toonde deze eerst helemaal niet, waardoor een mislukte login zwijgend
   terugkeerde naar een leeg formulier. Ze staan bovenaan de inhoud, boven de hero, zodat ze
   niet onder de vouw kunnen verdwijnen. */
.mk-flashes { padding: 18px 0 0; }
.mk-flash { padding: 13px 18px; border-radius: 10px; font-size: 15px; line-height: 1.5;
            margin-bottom: 10px; border-left: 3px solid transparent; }
.mk-flash--success { background: #e7f3ec; color: #14683f; border-left-color: #1fa038; }
.mk-flash--error   { background: #f9eae7; color: #8f2f22; border-left-color: #a33526; }
.mk-flash--info    { background: #f0f4f9; color: #2c3b4f; border-left-color: #4a6b9a; }


/* ---------- hero met een staande foto ernaast ----------
   Een portretfoto als volle achtergrond snijdt het onderwerp weg. Dan zetten we hem naast
   de tekst op zijn eigen verhouding, zodat het beeld heel blijft. */
.mk-hero--naast { padding: 64px 0; }
.mk-hero--naast .mk-hero-grid { grid-template-columns: 1.1fr .9fr; align-items: center; }
.mk-hero-foto { border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.4);
                max-height: 460px; }
.mk-hero-foto img { width: 100%; height: 100%; max-height: 460px; object-fit: cover;
                    object-position: center 28%; display: block; }
@media (max-width: 900px) {
  .mk-hero--naast .mk-hero-grid { grid-template-columns: 1fr; }
  .mk-hero-foto { max-height: 300px; margin-top: 8px; }
}

/* ---------- ruimere prijstabellen ----------
   Op de volle containerbreedte is er plaats zat; dan hoeft niets te schuiven. De eerste
   kolom draagt de omschrijving, de rest zijn bedragen en die lijnen rechts uit. */
.mk-table--ruim { min-width: 0; font-size: 15.5px; }
.mk-table--ruim th, .mk-table--ruim td { padding: 15px 22px; vertical-align: top; }
.mk-table--ruim td:first-child { width: 42%; }
.mk-table--ruim tbody tr:hover { background: #fafcfb; }
.mk-td-sub { display: block; font-size: 13px; font-weight: 400; color: #6b7c72; margin-top: 3px; }
.mk-table--ruim .is-total td { background: #eef4f0; }
@media (max-width: 760px) {
  /* Onder deze breedte past een tabel met bedragen echt niet meer; dan mag hij schuiven. */
  .mk-table--ruim { min-width: 520px; font-size: 14.5px; }
  .mk-table--ruim th, .mk-table--ruim td { padding: 12px 14px; }
}

/* Een knop in de zijkolom moet binnen zijn kader blijven. Dat werkt nu pas echt doordat
   border-box is aangezet; deze regel vangt de rest af. */
.mk-aside-card .ft-btn { max-width: 100%; }
.mk-aside-card dl + .ft-btn, .mk-aside-card p + .ft-btn { margin-top: 4px; }

/* ---------- varianten op de hero ----------
   Niet elke pagina heeft dezelfde hoogte of regellengte nodig. Een lange titel die op vier
   regels valt leest trager dan dezelfde titel op drie. */
.mk-hero--laag { padding: 74px 0 66px; }
.mk-hero--breed .mk-hero-copy > * { max-width: 760px; }
.mk-hero--breed h1 { max-width: 780px; }
@media (max-width: 900px) {
  .mk-hero--laag { padding: 54px 0 48px; }
  .mk-hero--breed .mk-hero-copy > * { max-width: none; }
  .mk-hero--breed h1 { max-width: none; }
}