/* personalfitnessthuis.nl — "de vragen vooraf". Bladwijzer: het vraagnummer in bordeaux en de dubbele lijn. */
:root{
  --inkt:#2a2226; --grijs:#6b5f64; --lijn:#e6dcdf; --papier:#fbf7f5; --wit:#fff;
  --bordeaux:#6e1e2e; --bordeaux-diep:#4f1521; --bordeaux-licht:#f3dfe3; --bordeaux-tekst:#6e1e2e;
  --roze:#e9b9c2; --olijf:#5a6b3a; --olijf-licht:#e8ecdc; --olijf-tekst:#3f4c27;
  --kop:Baskerville,"Libre Baskerville","Baskerville Old Face","Times New Roman",serif;
  --tekst:Tahoma,"Segoe UI",Geneva,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--inkt);font-family:var(--tekst);font-size:16.5px;line-height:1.7}
img,video,svg{max-width:100%}
a{color:var(--bordeaux-tekst)} a:hover{color:var(--inkt)}
h1,h2,h3,h4{font-family:var(--kop);font-weight:700;line-height:1.15;margin:0 0 .5em}
h1{font-size:2.5rem;letter-spacing:-.01em} h2{font-size:1.7rem} h3{font-size:1.2rem} h4{font-size:1rem}
p{margin:0 0 1.1em} ul,ol{margin:0 0 1.1em;padding-left:1.2em} li{margin-bottom:.4em}

.q-rij{max-width:1060px;margin:0 auto;padding:0 20px}
.q-lezen{max-width:700px}
.q-band{padding:56px 0}
.q-band--wit{background:var(--wit)}
.q-band--bordeaux{background:var(--bordeaux-diep);color:#f3e6e9}
.q-band--bordeaux h1,.q-band--bordeaux h2,.q-band--bordeaux h3{color:#fff}
.q-band--bordeaux a{color:var(--roze)} .q-band--bordeaux a:hover{color:#fff}
.q-band--roze{background:var(--bordeaux-licht)}
.q-band--olijf{background:var(--olijf-licht)}

/* vraagnummer en dubbele lijn */
.q-nr{font-family:var(--kop);font-size:.95rem;letter-spacing:.12em;color:var(--bordeaux-tekst);display:block;margin-bottom:8px}
.q-band--bordeaux .q-nr{color:var(--roze)}
.q-dubbel{border:0;border-top:3px double var(--bordeaux);width:64px;margin:0 0 18px}
.q-band--bordeaux .q-dubbel{border-top-color:var(--roze)}
.q-band--olijf .q-dubbel{border-top-color:var(--olijf)}

/* kop */
.q-top{background:var(--wit);border-bottom:3px double var(--bordeaux)}
.q-top__rij{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;flex-wrap:wrap}
.q-merk{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--inkt)}
.q-merk b{font-family:var(--kop);font-size:1.15rem;display:block;line-height:1.1}
.q-merk small{font-size:.74rem;color:var(--grijs);letter-spacing:.1em;text-transform:uppercase}
.q-nav{display:flex;flex-wrap:wrap;gap:2px 20px}
.q-nav a{font-family:var(--kop);font-size:1.02rem;color:var(--inkt);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.q-nav a:hover{border-bottom-color:var(--bordeaux)}
.q-nav a[aria-current]{color:var(--bordeaux-tekst);border-bottom-color:var(--bordeaux)}

/* hero */
.q-hero{position:relative;background:var(--bordeaux-diep);color:#fff;overflow:hidden}
.q-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.36}
.q-hero__in{position:relative;padding:84px 0 70px}
.q-hero h1{color:#fff;max-width:18ch;font-size:2.9rem}
.q-hero p{color:#f1dde2;max-width:56ch;font-size:1.06rem}
.q-hero .q-nr{color:var(--roze)}

/* vraag-antwoord */
.q-qa{background:var(--wit);border:1px solid var(--lijn);border-radius:2px;padding:20px 24px;margin:0 0 12px}
.q-qa h3{margin-bottom:.35em}
.q-qa p:last-child{margin-bottom:0}
.q-qa .q-tag{font-family:var(--tekst);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--olijf-tekst);background:var(--olijf-licht);padding:2px 8px;border-radius:2px;display:inline-block;margin-bottom:8px}
.q-qa[hidden]{display:none}

/* filter */
.q-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.q-filter button{font-family:var(--tekst);font-size:.9rem;border:1px solid var(--bordeaux);background:var(--wit);color:var(--bordeaux-tekst);border-radius:2px;padding:8px 14px;cursor:pointer}
.q-filter button:hover{background:var(--bordeaux-licht)}
.q-filter button[aria-pressed="true"]{background:var(--bordeaux);color:#fff}
.q-telling{font-size:.9rem;color:var(--grijs);margin-bottom:14px}

/* raster */
.q-net{display:grid;gap:18px}
.q-net--2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.q-net--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.q-vak{background:var(--wit);border:1px solid var(--lijn);padding:22px 24px 18px}
.q-vak h3{margin-bottom:.35em}
.q-vak p:last-child,.q-vak ul:last-child{margin-bottom:0}
.q-band--bordeaux .q-vak{background:#5e1a29;border-color:#7a2d3d;color:#f3e6e9}
.q-band--bordeaux .q-vak h3{color:#fff}
a.q-vak{display:block;text-decoration:none;color:var(--inkt)}
a.q-vak:hover{border-color:var(--bordeaux)}
a.q-vak span{font-size:.92rem;color:var(--grijs);display:block}

/* beeld */
.q-foto{margin:0 0 22px}
.q-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;height:auto;display:block;border:6px solid var(--wit);box-shadow:0 1px 0 var(--lijn)}
.q-foto figcaption{font-size:.88rem;color:var(--grijs);margin-top:10px;font-style:italic}

/* knop */
.q-knop{display:inline-block;font-family:var(--tekst);font-weight:700;font-size:.98rem;background:var(--bordeaux);color:#fff;text-decoration:none;padding:12px 22px;border-radius:2px}
.q-knop:hover{background:var(--bordeaux-diep);color:#fff}
.q-knop--olijf{background:var(--olijf)} .q-knop--olijf:hover{background:var(--olijf-tekst)}

.q-kader{background:var(--olijf-licht);border-left:4px solid var(--olijf);padding:16px 20px;margin:0 0 20px}
.q-kader p:last-child{margin-bottom:0}
.q-tabel{width:100%;border-collapse:collapse;background:var(--wit);font-size:.94rem}
.q-tabel th,.q-tabel td{border:1px solid var(--lijn);padding:10px 12px;text-align:left;vertical-align:top}
.q-tabel th{font-family:var(--kop);background:var(--bordeaux-licht);font-weight:700}
.q-scroll{overflow-x:auto}

/* voet */
.q-voet{background:#2b1a1f;color:#d9c9cd;padding:46px 0 30px;font-size:.94rem}
.q-voet h4{color:#fff;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;font-family:var(--tekst)}
.q-voet a{color:#d9c9cd;text-decoration:none} .q-voet a:hover{color:#fff;text-decoration:underline}
.q-voet ul{list-style:none;padding:0;margin:0}
.q-voet__net{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.q-voet__eind{border-top:1px solid #4a3239;margin-top:30px;padding-top:18px;color:#a8969b;font-size:.86rem}

@media (max-width:760px){
  h1{font-size:1.9rem} .q-hero h1{font-size:2rem} h2{font-size:1.45rem}
  .q-band{padding:40px 0} .q-hero__in{padding:56px 0 46px}
}