/* trainingaanhuis.nl — "de week". Eigen bladwijzer: de zevendelige weekbalk. */
:root{
  --inkt:#2c2a2f;
  --zacht:#56535c;
  --papier:#eef1f5;
  --wit:#ffffff;
  --lijn:#d7dae1;
  --nacht:#232739;
  --nacht-diep:#191c2b;
  --nacht-tekst:#e9ebf3;
  --klei:#b4463a;          /* vlak met witte tekst */
  --klei-tekst:#9a392e;    /* klei als tekst op licht */
  --klei-licht:#f8e3de;
  --klei-zacht:#e8a79c;    /* accent op donkere vlakken */
  --pruim:#6b4f7a;
  --pruim-tekst:#59416a;
  --pruim-licht:#efe8f4;
  --pruim-zacht:#c3addb;
  --rust:#63666f;
  --rust-licht:#e4e7ec;
  --kop:Corbel,Candara,"Segoe UI",Optima,"Trebuchet MS",sans-serif;
  --leesletter:"Palatino Linotype",Palatino,"Book Antiqua","Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--inkt);
  font-family:var(--leesletter);font-size:17px;line-height:1.66}
img,svg,video{max-width:100%}
a{color:var(--klei-tekst)}
a:hover{color:var(--inkt)}
h1,h2,h3,h4{font-family:var(--kop);font-weight:700;line-height:1.2;letter-spacing:-.008em;margin:0 0 .5em}
h1{font-size:2.15rem}
h2{font-size:1.52rem}
h3{font-size:1.14rem}
h4{font-size:1rem}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.05em;padding-left:1.15em}
li{margin-bottom:.4em}
strong{font-weight:700}

.w-binnen{max-width:1080px;margin:0 auto;padding:0 20px}
.w-smal{max-width:748px}
.w-laag{padding:52px 0}
.w-laag--wit{background:var(--wit)}
.w-laag--nacht{background:var(--nacht);color:var(--nacht-tekst)}
.w-laag--nacht h1,.w-laag--nacht h2,.w-laag--nacht h3{color:#fff}
.w-laag--nacht a{color:var(--klei-zacht)}
.w-laag--nacht a:hover{color:#fff}
.w-laag--klei{background:var(--klei-licht)}
.w-laag--pruim{background:var(--pruim-licht)}
.w-laag--krap{padding:34px 0}

/* de weekbalk: zeven segmenten, het handschrift van deze site */
.w-balk{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin:0 0 16px}
.w-balk span{height:7px;border-radius:2px;background:var(--rust-licht)}
.w-balk span.w-t{background:var(--klei)}
.w-balk span.w-b{background:var(--pruim)}
.w-balk--groot span{height:11px}
.w-laag--nacht .w-balk span{background:#3b405a}
.w-laag--nacht .w-balk span.w-t{background:var(--klei)}
.w-laag--nacht .w-balk span.w-b{background:var(--pruim-zacht)}

.w-kopje{display:inline-block;font-family:var(--kop);font-size:.74rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;padding:4px 9px;border-radius:3px;margin-bottom:10px}
.w-kopje--klei{background:var(--klei-licht);color:var(--klei-tekst)}
.w-kopje--pruim{background:var(--pruim-licht);color:var(--pruim-tekst)}
.w-kopje--rust{background:var(--rust-licht);color:#4c4f57}
.w-laag--nacht .w-kopje{background:#333853;color:#dfe2ee}

/* kop van de site */
.w-top{background:var(--wit);border-bottom:1px solid var(--lijn)}
.w-top__rij{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;flex-wrap:wrap}
.w-merk{display:flex;align-items:center;gap:10px;text-decoration:none}
.w-merk b{font-family:var(--kop);font-size:1.06rem;color:var(--inkt);display:block;line-height:1.15}
.w-merk i{font-style:normal;font-family:var(--kop);font-size:.73rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--zacht)}
.w-menu{display:flex;flex-wrap:wrap;gap:3px 19px}
.w-menu a{font-family:var(--kop);font-size:.97rem;color:var(--inkt);text-decoration:none;
  padding:3px 0;border-bottom:2px solid transparent}
.w-menu a:hover{border-bottom-color:var(--klei)}
.w-menu a[aria-current]{border-bottom-color:var(--inkt);font-weight:700}

/* hero */
.w-hero{position:relative;background:var(--nacht-diep);color:#fff;overflow:hidden}
.w-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.w-hero__op{position:relative;padding:74px 0 62px}
.w-hero h1{color:#fff;max-width:17ch}
.w-hero p{color:#dfe2ec;max-width:56ch;font-size:1.09rem}
.w-hero .w-balk{max-width:420px}

/* kaarten */
.w-net{display:grid;gap:18px}
.w-net--2{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.w-net--3{grid-template-columns:repeat(auto-fit,minmax(244px,1fr))}
.w-kaart{background:var(--wit);border:1px solid var(--lijn);border-left:3px solid var(--rust);
  border-radius:3px;padding:20px 22px}
.w-kaart--klei{border-left-color:var(--klei)}
.w-kaart--pruim{border-left-color:var(--pruim)}
.w-kaart h3{margin-bottom:.35em}
.w-kaart p:last-child,.w-kaart ul:last-child{margin-bottom:0}
.w-laag--nacht .w-kaart{background:#2c3147;border-color:#3b405a;color:var(--nacht-tekst)}

/* dagraster van de weekmodule */
.w-dagen{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:0 0 20px}
.w-dag{background:var(--wit);border:1px solid var(--lijn);border-radius:3px;padding:10px 9px 12px;min-height:118px}
.w-dag__naam{font-family:var(--kop);font-size:.73rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--zacht);margin-bottom:7px}
.w-dag__bal{height:6px;border-radius:2px;background:var(--rust-licht);margin-bottom:9px}
.w-dag--t .w-dag__bal{background:var(--klei)}
.w-dag--b .w-dag__bal{background:var(--pruim)}
.w-dag--t{border-color:#e4b5ac}
.w-dag strong{font-family:var(--kop);font-size:.95rem;display:block;margin-bottom:3px}
.w-dag span{font-size:.84rem;line-height:1.42;display:block;color:var(--zacht)}
.w-dag--t strong{color:var(--klei-tekst)}
.w-dag--b strong{color:var(--pruim-tekst)}

.w-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.w-knop{font-family:var(--kop);font-size:.95rem;background:var(--wit);color:var(--inkt);
  border:1px solid var(--lijn);border-radius:3px;padding:9px 14px;cursor:pointer}
.w-knop:hover{border-color:var(--klei);color:var(--klei-tekst)}
.w-knop[aria-pressed="true"]{background:var(--klei);border-color:var(--klei);color:#fff}
.w-uitleg{background:var(--wit);border:1px solid var(--lijn);border-radius:3px;padding:20px 22px}
.w-uitleg h3{margin-bottom:.3em}
.w-tel{font-family:var(--kop);font-size:.9rem;color:var(--zacht);margin:0 0 16px}

/* knop naar buiten */
.w-daad{display:inline-block;font-family:var(--kop);font-weight:700;font-size:1rem;
  background:var(--klei);color:#fff;text-decoration:none;padding:12px 20px;border-radius:3px}
.w-daad:hover{background:#9a392e;color:#fff}
.w-daad--stil{background:transparent;color:var(--inkt);border:1px solid var(--inkt)}
.w-daad--stil:hover{background:var(--inkt);color:#fff}

/* beeld */
.w-beeld{margin:0 0 20px}
.w-beeld img{width:100%;aspect-ratio:4/3;object-fit:cover;height:auto;border-radius:3px;display:block}
.w-beeld figcaption{font-size:.88rem;color:var(--zacht);padding-left:11px;
  border-left:3px solid var(--rust-licht);margin-top:9px}
.w-beeld--klei figcaption{border-left-color:var(--klei)}
.w-beeld--pruim figcaption{border-left-color:var(--pruim)}

/* tabel */
.w-tabel{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--wit)}
.w-tabel th,.w-tabel td{border:1px solid var(--lijn);padding:10px 12px;text-align:left;vertical-align:top}
.w-tabel th{font-family:var(--kop);background:var(--rust-licht)}
.w-tabel caption{font-size:.87rem;color:var(--zacht);text-align:left;padding-bottom:8px}
.w-rol{overflow-x:auto}

/* verderlezen */
.w-verder{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(244px,1fr))}
.w-verder a{display:block;background:var(--wit);border:1px solid var(--lijn);border-radius:3px;
  padding:16px 18px;text-decoration:none;color:var(--inkt)}
.w-verder a:hover{border-color:var(--klei)}
.w-verder strong{display:block;font-family:var(--kop);font-size:1.03rem;margin:2px 0 4px}
.w-verder span.w-omschrijf{font-size:.9rem;color:var(--zacht);display:block}

.w-inzet{background:var(--pruim-licht);border-radius:3px;padding:20px 22px;margin:0 0 20px}
.w-inzet p:last-child{margin-bottom:0}
.w-lijst-schoon{list-style:none;padding:0}
.w-lijst-schoon li{padding-left:18px;position:relative}
.w-lijst-schoon li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  border-radius:2px;background:var(--klei)}

/* voet */
.w-voet{background:var(--nacht-diep);color:#ced2e0;padding:44px 0 30px;font-size:.95rem}
.w-voet h4{color:#fff;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:11px}
.w-voet a{color:#ced2e0;text-decoration:none}
.w-voet a:hover{color:#fff;text-decoration:underline}
.w-voet ul{list-style:none;padding:0;margin:0}
.w-voet__net{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.w-voet__slot{border-top:1px solid #333853;margin-top:30px;padding-top:18px;color:#9aa0b6;font-size:.87rem}

@media (max-width:760px){
  h1{font-size:1.72rem}
  h2{font-size:1.32rem}
  .w-laag{padding:38px 0}
  .w-hero__op{padding:52px 0 44px}
  .w-dagen{grid-template-columns:repeat(2,1fr)}
  .w-dag{min-height:0}
}
@media (min-width:761px) and (max-width:980px){
  .w-dagen{grid-template-columns:repeat(4,1fr)}
}