/* FitCore — huisstijl afgeleid van de flyer: saliegroen, diepblauw, zongeel. */

:root {
  /* Kleur */
  --sage-900:#8fae9f; --sage-700:#a8c3b6; --sage-500:#b8cdc4; --sage-300:#d8e4dd; --sage-100:#eef3f0;
  --ink:#27415a; --ink-700:#3d566d; --ink-500:#556d82; --paper:#ffffff;
  --zon:#f2c230; --zon-diep:#8a6404;
  --lijn:rgba(39,65,90,.14);

  /* Typografische schaal (1.25) */
  --t-xs:0.75rem; --t-s:1rem; --t-m:1rem; --t-l:1.25rem;
  --t-xl:1.5rem; --t-2xl:2rem; --t-3xl:2.5rem; --t-4xl:3.25rem;

  /* Ruimteschaal (x2) */
  --r-1:0.25rem; --r-2:0.5rem; --r-3:1rem; --r-4:1.5rem; --r-5:2rem;
  --r-6:3rem; --r-7:4rem; --r-8:6rem;

  --straal:14px; --straal-s:8px;
  --schaduw:0 1px 2px rgba(39,65,90,.06), 0 8px 24px rgba(39,65,90,.08);
  --breedte:70rem;
  --vink:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 13l6 6L21 4' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Donkere modus: dezelfde huisstijl, omgekeerde inkt en papier. */
@media (prefers-color-scheme:dark){
  :root{
    --sage-900:#243b33; --sage-700:#2b463c; --sage-500:#16211d; --sage-300:#1e2d28; --sage-100:#1b2724;
    --ink:#e8f1ec; --ink-700:#cddbd4; --ink-500:#9db3a9; --paper:#20302a;
    --zon:#f5cf52; --zon-diep:#ffdf7a;
    --lijn:rgba(232,241,236,.18);
    --schaduw:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
  .knop{background:var(--zon);color:#16211d;border-color:var(--zon)}
  .knop:hover{background:#ffdf7a;color:#16211d}
  .knop-tweede{background:transparent;color:var(--ink);border-color:var(--ink)}
  .knop-tweede:hover{background:var(--ink);color:#16211d}
  .zonkop{text-shadow:0 2px 0 rgba(0,0,0,.45)}
  .rooster-tabel thead th{background:var(--sage-700);color:var(--ink)}
  .lint{background:var(--zon);color:#16211d}
  .voet{background:#101a17;color:var(--ink-700)}
  .voet h2,.voet h3,.voet a{color:var(--ink)}
  .motief::before{opacity:.12}
  .held-foto img{filter:brightness(.92)}
  :focus-visible{outline-color:var(--zon)}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;
  font-family:Poppins,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:var(--t-m); line-height:1.65; color:var(--ink-700);
  background:var(--sage-500);
  -webkit-font-smoothing:antialiased;
}

/* Achtergrondmotief van de flyer: chevrons links, stippen rechts. */
.motief{position:relative;isolation:isolate;overflow:hidden}
.motief::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><circle cx='6' cy='6' r='5' fill='white' opacity='.55'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='120'><path d='M10 6 L46 60 L10 114' fill='none' stroke='white' stroke-width='7' opacity='.4'/></svg>");
  background-position:right -10px top -10px, left -20px top 0;
  background-repeat:repeat-y, repeat-y;
  background-size:60px 60px, 90px 120px;
}

h1,h2,h3,h4{font-family:Oswald,"Arial Narrow",system-ui,sans-serif;color:var(--ink);line-height:1.12;
  font-weight:600;letter-spacing:.01em;margin:0 0 var(--r-3)}
h1{font-size:var(--t-4xl)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-l)}
h4{font-size:var(--t-m);font-weight:500}
p{margin:0 0 var(--r-3);max-width:62ch}
a{color:var(--ink);text-underline-offset:3px}
a:hover{color:var(--zon-diep)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto;display:block}
ul{margin:0 0 var(--r-3);padding-left:1.15em}
li{margin-bottom:var(--r-2)}
strong{color:var(--ink)}

/* De gele koppen van de flyer. */
.zonkop{display:inline-block;color:var(--zon);background:var(--ink);font-weight:700;
  padding:0.25rem 1rem;border-radius:var(--straal-s);text-shadow:none;
  box-shadow:0 3px 0 rgba(39,65,90,.25)}

.omhulsel{width:min(100% - 2.5rem,var(--breedte));margin-inline:auto}
.smal{width:min(100% - 2.5rem,48rem);margin-inline:auto}

section{padding-block:var(--r-7)}
.vlak{background:var(--sage-100)}
.vlak-wit{background:var(--paper)}

.overslaan{position:absolute;left:-9999px}
.overslaan:focus{left:var(--r-3);top:var(--r-3);z-index:100;background:var(--ink);color:#fff;
  padding:var(--r-2) var(--r-3);border-radius:var(--straal-s)}

/* Kop en menu */
.kop{background:var(--sage-300);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:40}
.kop-rij{display:flex;align-items:center;gap:var(--r-3);min-height:68px;flex-wrap:wrap}
.merk{display:flex;align-items:center;gap:0.5rem;text-decoration:none;font-family:Oswald,sans-serif;
  font-size:1.5rem;color:var(--ink);letter-spacing:.02em}
.merk b{font-weight:700}.merk span{font-weight:300}
.bliksem{width:26px;height:26px;flex:none}
.menu{margin-left:auto;display:flex;gap:var(--r-3);flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin-block:0}
.menu li{margin:0}
.menu a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:var(--t-s);
  font-weight:500;color:var(--ink-700);padding:0.25rem 0.25rem;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--zon)}
.kop .knop{padding:0.5rem 1rem;font-size:var(--t-s);min-height:44px}

/* Knoppen: twee stijlen, meer niet */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  font-family:Poppins,sans-serif;font-size:var(--t-m);font-weight:600;line-height:1.2;
  padding:0.75rem 1.5rem;border-radius:var(--straal-s);border:2px solid var(--ink);
  background:var(--ink);color:#fff;text-decoration:none;cursor:pointer;
  transition:background .15s,color .15s,transform .15s}
.knop:hover{background:#1b2f42;color:#fff;transform:translateY(-1px)}
.knop-tweede{background:transparent;color:var(--ink)}
.knop-tweede:hover{background:var(--ink);color:#fff}
.knoppenrij{display:flex;flex-wrap:wrap;gap:var(--r-3);align-items:center;margin-bottom:var(--r-3)}

/* Held */
.held{background:var(--sage-500);padding-block:var(--r-6) 0}
.held-rij{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--r-5);align-items:end}
.held h1{font-size:clamp(2.25rem,6vw,var(--t-4xl));margin-bottom:var(--r-3)}
.held .lead{font-size:var(--t-l);color:var(--ink-700);margin-bottom:var(--r-4)}
.held-foto{display:block;align-self:end;justify-self:center;
  height:clamp(20rem,46vh,28rem);max-width:100%}
.held-foto img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom}
.onder-held{display:flex;flex-wrap:wrap;gap:var(--r-3) var(--r-5);font-size:var(--t-s);
  color:var(--ink);padding-bottom:var(--r-5);margin-top:var(--r-4)}
.onder-held span{display:flex;align-items:center;gap:0.5rem}

/* Vinklijst van de flyer */
.vinken{list-style:none;padding:0;margin:0 0 var(--r-4)}
.vinken li{display:flex;gap:0.75rem;align-items:flex-start;margin-bottom:var(--r-2);font-size:var(--t-m)}
.vinken li a,.notitie a,.onder-held a{display:inline-block;min-height:24px;padding-block:0.25rem}
.vinken li::before{content:"";flex:none;width:1.15em;height:1.15em;margin-top:.2em;
  background-color:var(--ink);
  -webkit-mask:no-repeat center/contain var(--vink);mask:no-repeat center/contain var(--vink)}

/* Roosters en kaarten */
.rooster{display:grid;gap:var(--r-4)}
.k2{grid-template-columns:repeat(2,1fr)}
.k3{grid-template-columns:repeat(3,1fr)}
.kaart{background:var(--paper);border:1px solid var(--lijn);border-radius:var(--straal);
  padding:var(--r-4);box-shadow:var(--schaduw)}
.kaart h3{margin-bottom:var(--r-2)}
.kaart p:last-child{margin-bottom:0}
.kaart-icoon{width:2.75rem;height:2.75rem;margin-bottom:var(--r-3)}

/* Lessenrooster */
.rooster-tabel{width:100%;border-collapse:collapse;background:var(--paper);
  border-radius:var(--straal);overflow:hidden;box-shadow:var(--schaduw);font-size:var(--t-s)}
.rooster-tabel caption{text-align:left;padding-bottom:var(--r-2);color:var(--ink-700);font-size:var(--t-s)}
.rooster-tabel th,.rooster-tabel td{padding:0.75rem 1rem;text-align:left;border-bottom:1px solid var(--lijn)}
.rooster-tabel thead th{background:var(--ink);color:#fff;font-family:Oswald,sans-serif;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;font-size:var(--t-xs)}
.rooster-tabel tbody th{font-family:Oswald,sans-serif;font-weight:600;color:var(--ink);white-space:nowrap}
.rooster-tabel tr:last-child td,.rooster-tabel tr:last-child th{border-bottom:0}
.dagkop th{background:var(--sage-300);font-family:Oswald,sans-serif;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink);font-size:var(--t-xs)}
.tabelhuls{overflow-x:auto}

/* Pakketten */
.pakket{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--lijn);
  border-radius:var(--straal);overflow:hidden;box-shadow:var(--schaduw)}
.pakket img{width:100%;aspect-ratio:715/272;object-fit:cover}
.pakket-body{padding:var(--r-4);display:flex;flex-direction:column;flex:1}
.pakket-body h3{margin-bottom:var(--r-1)}
.pakket .sub{font-size:var(--t-s);color:var(--ink-700);margin-bottom:var(--r-3)}
.prijs{font-family:Oswald,sans-serif;font-size:var(--t-2xl);color:var(--ink);line-height:1;
  margin-bottom:var(--r-3)}
.prijs small{font-size:var(--t-xs);font-family:Poppins,sans-serif;color:var(--ink-700);
  display:block;font-weight:400;margin-top:0.25rem}
.pakket .knop{margin-top:auto}
.lint{background:var(--zon);color:var(--ink);font-family:Oswald,sans-serif;text-transform:uppercase;
  letter-spacing:.1em;font-size:var(--t-xs);text-align:center;padding:0.5rem}
.uitgelicht{border:2px solid var(--zon)}

/* Citaat */
.citaat{border-left:4px solid var(--zon);padding-left:var(--r-3);font-style:italic;
  font-size:var(--t-l);color:var(--ink);margin:0 0 var(--r-4)}
.citaat footer{font-style:normal;font-size:var(--t-s);color:var(--ink-700);margin-top:var(--r-2)}

/* Formulier */
.veld{margin-bottom:var(--r-3)}
.veld label{display:block;font-size:var(--t-s);font-weight:600;color:var(--ink);margin-bottom:var(--r-1)}
.veld input,.veld select,.veld textarea{width:100%;font:inherit;font-size:var(--t-m);
  padding:0.75rem 1rem;border:1px solid var(--ink-500);border-radius:var(--straal-s);
  background:var(--paper);color:var(--ink)}
.veld .hint{font-size:var(--t-xs);color:var(--ink-700);margin-top:var(--r-1)}
fieldset{border:1px solid var(--lijn);border-radius:var(--straal);padding:var(--r-3);margin:0 0 var(--r-4)}
legend{font-family:Oswald,sans-serif;color:var(--ink);padding-inline:0.5rem}

/* Voet */
.voet{background:var(--ink);color:#e2ecf3;padding-block:var(--r-6) var(--r-4);font-size:var(--t-s)}
.voet h2,.voet h3{color:#fff;font-size:var(--t-m)}
.voet a{color:#fff}
.voet-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--r-4);margin-bottom:var(--r-5)}
.voet ul{list-style:none;padding:0}
.voet li{margin-bottom:0}
.voet li a,.voet-slot a{display:inline-flex;align-items:center;min-height:44px;padding-block:0.25rem}
.voet-slot{border-top:1px solid rgba(255,255,255,.18);padding-top:var(--r-3);
  display:flex;flex-wrap:wrap;gap:var(--r-3);justify-content:space-between;font-size:var(--t-xs)}

.kruimels{font-size:var(--t-xs);color:var(--ink-700);padding-block:var(--r-3) 0}
.kruimels ol{list-style:none;display:flex;flex-wrap:wrap;gap:0.5rem;padding:0;margin:0}
.kruimels li{margin:0;display:flex;align-items:center}
.kruimels a{display:inline-flex;align-items:center;min-height:44px;padding-right:0.25rem}
.kruimels li::after{content:"\203A";margin-left:0.5rem;color:var(--ink-500)}
.kruimels li:last-child::after{content:""}

.notitie{background:var(--sage-300);border-left:4px solid var(--ink);padding:var(--r-3);
  border-radius:var(--straal-s);font-size:var(--t-s);margin-bottom:var(--r-4)}
.notitie p:last-child{margin-bottom:0}

/* Smalle schermen */
@media (max-width:60rem){
  .k3{grid-template-columns:repeat(2,1fr)}
  .voet-rij{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:44rem){
  :root{--t-4xl:2.5rem;--t-3xl:2rem;--t-2xl:1.5rem;--r-7:2.5rem;--r-8:3.5rem}
  .held-rij{grid-template-columns:1fr}

  .k2,.k3{grid-template-columns:1fr}
  .menu{gap:var(--r-2) var(--r-3);width:100%;margin-left:0;padding-bottom:var(--r-2)}
  .kop{position:static}
  .knoppenrij .knop{flex:1 1 14rem}
}

/* Kaart met de lesplaatsen */
.kaartvlak{border:0;width:100%;aspect-ratio:16/9;border-radius:var(--straal);
  background:var(--sage-300);box-shadow:var(--schaduw)}

/* Compacte held op mobiel: uitleg en knop in het eerste scherm */
@media (max-width:44rem){
  .held{padding-block:var(--r-4) 0}
  .held h1{font-size:2rem;margin-bottom:var(--r-2)}
  .held .lead{font-size:var(--t-m);margin-bottom:var(--r-3)}
  .held-foto{height:15rem;justify-self:start;margin-top:var(--r-3)}
  .onder-held{margin-top:var(--r-3);padding-bottom:var(--r-4);gap:var(--r-2) var(--r-3)}
  /* Eén schuivende rij in plaats van een uitklapmenu: werkt ook zonder
     javascript en houdt de kop laag genoeg om de kern in beeld te laten. */
  .kop-rij>nav{order:3;width:100%}
  .menu{flex-wrap:nowrap;overflow-x:auto;width:100%;margin-left:0;
    gap:var(--r-3);padding:0 0 0.25rem;scrollbar-width:thin;
    -webkit-overflow-scrolling:touch}
  .menu a{white-space:nowrap;min-height:40px}
  .kop-rij{min-height:0;padding-top:0.25rem;gap:var(--r-2)}
  .kop .knop{padding:0.5rem 1rem;margin-left:auto}
}

.voet-rij-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:72rem){.voet-rij-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:60rem){.voet-rij-5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:40rem){.voet-rij-5{grid-template-columns:1fr}}

/* Hulpklassen — vervangen de inline stijlen in de sjablonen */
.midden{text-align:center}
.midden-rij{justify-content:center}
.auto-mid{margin-inline:auto}
.klein{font-size:var(--t-s)}
.lead{font-size:var(--t-l);color:var(--ink-700);max-width:62ch}
.mt-4{margin-top:var(--r-4)}
.mt-5{margin-top:var(--r-5)}
.mb-5{margin-bottom:var(--r-5)}
.mb-6{margin-bottom:var(--r-6)}
.vlak-sage{background:var(--sage-500)}
.held-rij-mid{align-items:center}
.h-m{font-size:var(--t-l)}
.h-s{font-size:var(--t-m);font-weight:600}
.voet-juridisch{display:flex;gap:1rem;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.label-vink{display:flex;gap:0.5rem;align-items:flex-start;font-weight:400}
.vinkje-in{width:auto;margin-top:0.25rem}

/* Aanraakvlakken: elke link minstens 24 px hoog, knoppen 44 px. */
main p a,main li a,.citaat a,.kaart a:not(.knop){display:inline-block;min-height:26px;padding-block:0.25rem}
.voet p a.knop{margin-top:var(--r-2)}

/* Aanraakvlakken. De ondergrens is 40 x 32 px; knoppen halen 44 px. */
main p a,main li a,.citaat a,.voet a,.kruimels a,
.kaart h3 a,.kaart a:not(.knop){display:inline-block;min-width:40px;min-height:36px;
  padding-block:.5rem;line-height:1.25}
.merk{min-height:44px}
/* De doorverwijslink telt ook mee zodra hij zichtbaar wordt. */
.overslaan{min-height:44px;display:inline-flex;align-items:center}

/* ── Dienstenbalk: één tik tussen de vijf onderdelen ──────────────────── */
.dienstenbalk{background:var(--ink);color:#e2ecf3}
.dienstenbalk-rij{display:flex;flex-wrap:nowrap;align-items:center;gap:0 var(--r-4);
  overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.dienstenbalk-kop{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.08em;
  font-size:var(--t-xs);color:var(--sage-700);white-space:nowrap}
.dienstenbalk a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;
  color:#fff;text-decoration:none;font-size:var(--t-s);font-weight:500;
  border-bottom:2px solid transparent;padding-inline:.25rem}
.dienstenbalk a:hover{color:var(--zon);border-bottom-color:var(--zon)}
.dienstenbalk a[aria-current="page"]{color:var(--zon);border-bottom-color:var(--zon)}

/* ── Kaarten van het aanbod ───────────────────────────────────────────── */
.dienstkaart h3 a{text-decoration:none}
.dienstkaart h3 a:hover{text-decoration:underline}
.kaart-uit{background:var(--sage-300);border-style:dashed;display:flex;
  flex-direction:column;justify-content:center}

/* ── Genummerde stappen ───────────────────────────────────────────────── */
.stappen{counter-reset:stap;list-style:none;padding:0;display:grid;gap:var(--r-3);
  grid-template-columns:repeat(3,1fr)}
.stappen li{background:var(--paper);border:1px solid var(--lijn);border-radius:var(--straal);
  padding:var(--r-3);margin:0;box-shadow:var(--schaduw)}

/* Een blok dat de pagina opent: minder lucht eronder dan een volle sectie. */
.kort-blok{padding-block:var(--r-5) var(--r-6)}

@media (max-width:60rem){.stappen{grid-template-columns:1fr}}

/* Wat de zaak doet en waar, boven de titel: binnen vijf seconden duidelijk. */
.kicker{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:var(--t-xs);color:var(--ink);margin-bottom:var(--r-2);font-weight:500}

/* Lokveld tegen spam op het contactformulier: onzichtbaar en niet
   bereikbaar met het toetsenbord, dus een mens vult het nooit in. */
.lokveld{display:none}