/* fitnesstrainerthuis.nl — "vijf onderdelen". Bladwijzer: het grote gele rangnummer en de meter. */
:root{
  --inkt:#161a24; --grijs:#5c6270; --lijn:#e1e4ea; --papier:#f4f6fa; --wit:#fff;
  --kobalt:#1f4fbf; --kobalt-diep:#163a8c; --kobalt-licht:#e2e9f8; --kobalt-tekst:#1a43a3;
  --geel:#f2c14e; --geel-licht:#fdf3d6; --geel-tekst:#7a5a08;
  --kop:"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --tekst:Calibri,Candara,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--inkt);font-family:var(--tekst);font-size:17.5px;line-height:1.62}
img,video,svg{max-width:100%}
a{color:var(--kobalt-tekst)} a:hover{color:var(--inkt)}
h1,h2,h3,h4{font-family:var(--kop);font-weight:800;line-height:1.1;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:2.6rem} h2{font-size:1.7rem} h3{font-size:1.15rem} h4{font-size:.95rem}
p{margin:0 0 1.05em} ul,ol{margin:0 0 1.05em;padding-left:1.2em} li{margin-bottom:.35em}

.f-kolom{max-width:1100px;margin:0 auto;padding:0 20px}
.f-tekst{max-width:730px}
.f-deel{padding:58px 0}
.f-deel--wit{background:var(--wit)}
.f-deel--donker{background:var(--inkt);color:#e4e8f0}
.f-deel--donker h1,.f-deel--donker h2,.f-deel--donker h3{color:#fff}
.f-deel--donker a{color:var(--geel)} .f-deel--donker a:hover{color:#fff}
.f-deel--geel{background:var(--geel-licht)}
.f-deel--kobalt{background:var(--kobalt);color:#eaf0fc}
.f-deel--kobalt h1,.f-deel--kobalt h2,.f-deel--kobalt h3{color:#fff}
.f-deel--kobalt a{color:var(--geel)} .f-deel--kobalt a:hover{color:#fff}

/* rangnummer */
.f-rang{font-family:var(--kop);font-weight:800;font-size:3.2rem;line-height:1;color:var(--kobalt);letter-spacing:-.04em;display:block;margin-bottom:6px}
.f-deel--donker .f-rang,.f-deel--kobalt .f-rang{color:var(--geel)}
.f-kicker{font-family:var(--kop);font-weight:700;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--kobalt-tekst);display:block;margin-bottom:10px}
.f-deel--donker .f-kicker,.f-deel--kobalt .f-kicker{color:var(--geel)}

/* meter */
.f-meter{display:grid;grid-template-columns:150px 1fr;gap:10px 14px;align-items:center;margin:0 0 18px}
.f-meter span{font-family:var(--kop);font-weight:700;font-size:.9rem}
.f-meter i{display:block;height:12px;border-radius:6px;background:var(--lijn);position:relative;overflow:hidden}
.f-meter i b{position:absolute;left:0;top:0;bottom:0;background:var(--kobalt);border-radius:6px}
.f-deel--donker .f-meter i{background:#2a3040} .f-deel--donker .f-meter i b{background:var(--geel)}

/* kop */
.f-top{background:var(--wit);border-bottom:3px solid var(--geel)}
.f-top__rij{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;flex-wrap:wrap}
.f-merk{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--inkt)}
.f-merk b{font-family:var(--kop);font-weight:800;font-size:1.1rem;letter-spacing:-.02em;display:block;line-height:1.1}
.f-merk small{font-size:.72rem;color:var(--grijs);letter-spacing:.12em;text-transform:uppercase}
.f-nav{display:flex;flex-wrap:wrap;gap:2px 18px}
.f-nav a{font-family:var(--kop);font-weight:700;font-size:.95rem;color:var(--inkt);text-decoration:none;padding:4px 0;border-bottom:3px solid transparent}
.f-nav a:hover{border-bottom-color:var(--geel)}
.f-nav a[aria-current]{border-bottom-color:var(--kobalt)}

/* hero */
.f-hero{position:relative;background:var(--inkt);color:#fff;overflow:hidden}
.f-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.f-hero__in{position:relative;padding:86px 0 70px}
.f-hero h1{color:#fff;max-width:14ch;font-size:3.1rem}
.f-hero p{color:#dfe4ee;max-width:52ch;font-size:1.1rem}
.f-hero .f-kicker{color:var(--geel)}

/* raster en kaarten */
.f-raster{display:grid;gap:18px}
.f-raster--2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.f-raster--3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.f-raster--5{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.f-tegel{background:var(--wit);border:1px solid var(--lijn);border-radius:4px;padding:22px 22px 18px;border-top:4px solid var(--kobalt)}
.f-tegel--geel{border-top-color:var(--geel)}
.f-tegel h3{margin-bottom:.35em}
.f-tegel p:last-child,.f-tegel ul:last-child{margin-bottom:0}
.f-deel--donker .f-tegel{background:#1f2431;border-color:#2c3344;color:#e4e8f0}
.f-deel--donker .f-tegel h3{color:#fff}
a.f-tegel{display:block;text-decoration:none;color:var(--inkt)}
a.f-tegel:hover{border-top-color:var(--geel)}
a.f-tegel span{font-size:.92rem;color:var(--grijs);display:block}

/* module */
.f-keuze{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.f-keuze button{font-family:var(--kop);font-weight:700;font-size:.93rem;border:2px solid var(--lijn);background:var(--wit);color:var(--inkt);border-radius:4px;padding:9px 14px;cursor:pointer}
.f-keuze button:hover{border-color:var(--kobalt)}
.f-keuze button[aria-pressed="true"]{background:var(--kobalt);border-color:var(--kobalt);color:#fff}
.f-paneel{background:var(--wit);border:1px solid var(--lijn);border-radius:4px;padding:24px 26px}
.f-paneel h3{margin-bottom:.25em}
.f-paneel p.f-sub{color:var(--grijs);margin-bottom:16px}

/* beeld */
.f-beeld{margin:0 0 22px}
.f-beeld img{width:100%;aspect-ratio:4/3;object-fit:cover;height:auto;border-radius:4px;display:block}
.f-beeld figcaption{font-size:.88rem;color:var(--grijs);margin-top:8px;padding-left:10px;border-left:4px solid var(--geel)}

/* knop */
.f-knop{display:inline-block;font-family:var(--kop);font-weight:800;font-size:1rem;background:var(--geel);color:var(--inkt);text-decoration:none;padding:13px 22px;border-radius:4px}
.f-knop:hover{background:#e0ae32;color:var(--inkt)}
.f-knop--blauw{background:var(--kobalt);color:#fff}
.f-knop--blauw:hover{background:var(--kobalt-diep);color:#fff}

/* tabel */
.f-tabel{width:100%;border-collapse:collapse;background:var(--wit);font-size:.95rem}
.f-tabel th,.f-tabel td{border:1px solid var(--lijn);padding:10px 12px;text-align:left;vertical-align:top}
.f-tabel th{font-family:var(--kop);background:var(--kobalt-licht)}
.f-scroll{overflow-x:auto}
.f-kader{background:var(--kobalt-licht);border-radius:4px;padding:18px 22px;margin:0 0 20px}
.f-kader p:last-child{margin-bottom:0}

/* voet */
.f-voet{background:#0f1320;color:#c3c9d6;padding:46px 0 30px;font-size:.94rem}
.f-voet h4{color:var(--geel);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.f-voet a{color:#c3c9d6;text-decoration:none} .f-voet a:hover{color:#fff;text-decoration:underline}
.f-voet ul{list-style:none;padding:0;margin:0}
.f-voet__net{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.f-voet__eind{border-top:1px solid #262c3c;margin-top:30px;padding-top:18px;color:#8b93a6;font-size:.86rem}

@media (max-width:760px){
  h1{font-size:1.9rem} .f-hero h1{font-size:2.1rem} h2{font-size:1.4rem}
  .f-deel{padding:40px 0} .f-hero__in{padding:56px 0 46px}
  .f-meter{grid-template-columns:110px 1fr}
  .f-rang{font-size:2.4rem}
}