/* personaltrainsteraanhuis.nl — "Het uur"
   Voorvoegsel u-. Deelt geen enkele klassenaam met de zustersites. */

:root{
  --den:#1b3a30;          /* donkergroen, vlakken en koppen */
  --den-diep:#122720;     /* diepste vlak */
  --koper:#c07430;        /* alleen als vlak, met donkere tekst */
  --koper-knop:#a95f22;   /* vlak met witte tekst */
  --koper-tekst:#8f4f18;  /* koper als tekst op licht */
  --koper-licht:#e5a878;  /* accenttekst op donkere vlakken */
  --papier:#f7f6f1;
  --papier-warm:#eeece2;
  --tekst:#232a26;
  --steen:#585f59;        /* bijschrift op licht */
  --steen-licht:#c3cec6;  /* bijschrift op donker */
  --lijn:#d7d4c7;
  --lijn-donker:#3a5449;
  --wit:#ffffff;
  --kop:"Gill Sans","Gill Sans MT","Trebuchet MS",Calibri,"Segoe UI",sans-serif;
  --leest:"Lucida Sans","Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--tekst);
  font-family:var(--leest);font-size:16.5px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--kop);color:var(--den);letter-spacing:-.012em;line-height:1.22;margin:0 0 .5em}
h1{font-size:2.35rem;font-weight:600}
h2{font-size:1.6rem;font-weight:600;margin-top:2.4rem}
h3{font-size:1.16rem;font-weight:600}
p,li{max-width:63ch}
p{margin:0 0 1.05em}
a{color:var(--koper-tekst)}
a:hover{color:var(--den)}
img,video{max-width:100%;height:auto;display:block}
hr{border:0;border-top:1px solid var(--lijn);margin:2.6rem 0}

.u-binnen{max-width:1080px;margin:0 auto;padding:0 26px}
.u-smal{max-width:760px}

/* ---------- tijdlabels: het handschrift van deze site ---------- */
.u-klok{
  font-family:var(--kop);font-variant-numeric:tabular-nums;
  letter-spacing:.06em;font-weight:600;color:var(--koper-tekst);
  font-size:.82rem;text-transform:uppercase;
}
.u-klok--groot{font-size:1.5rem;letter-spacing:.02em;color:var(--den)}

/* ---------- kop van de site ---------- */
.u-top{border-bottom:1px solid var(--lijn);background:var(--papier)}
.u-top__rij{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;flex-wrap:wrap}
.u-merk{display:flex;align-items:center;gap:11px;text-decoration:none}
.u-merk svg{flex:none}
.u-merk b{font-family:var(--kop);font-weight:600;color:var(--den);font-size:1.02rem;letter-spacing:-.01em;line-height:1.2;display:block}
.u-merk span{font-family:var(--kop);font-weight:400;color:var(--steen);font-size:.82rem;letter-spacing:.05em;text-transform:uppercase}
.u-nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.u-nav a{font-family:var(--kop);font-size:.92rem;color:var(--den);text-decoration:none;padding:3px 0;border-bottom:2px solid transparent}
.u-nav a:hover,.u-nav a[aria-current]{border-bottom-color:var(--koper);color:var(--den)}

/* ---------- opening ---------- */
.u-opening{padding:58px 0 10px}
.u-opening__net{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.u-opening h1{font-size:2.75rem;margin-bottom:.35em}
.u-inleiding{font-size:1.09rem;color:#2f3733}
.u-film{position:relative}
.u-film video{width:100%;background:var(--den-diep)}
.u-film__rand{position:absolute;left:-14px;top:14px;bottom:14px;width:3px;background:var(--koper)}
.u-film__bij{margin-top:12px;font-size:.85rem;color:var(--steen);max-width:44ch}

/* ---------- lagen ---------- */
.u-laag{padding:56px 0}
.u-laag--warm{background:var(--papier-warm)}
.u-laag--diep{background:var(--den);color:var(--papier)}
.u-laag--diep h2,.u-laag--diep h3,.u-laag--diep h4{color:var(--papier)}
.u-laag--diep p,.u-laag--diep li{color:#dfe7e1}
.u-laag--diep .u-klok{color:var(--koper-licht)}
.u-laag--diep a{color:var(--koper-licht)}
.u-laag--diep hr{border-top-color:var(--lijn-donker)}
.u-laag__kop{display:flex;align-items:baseline;gap:16px;margin-bottom:1.4rem}
.u-laag__kop h2{margin:0}
.u-laag__kop::after{content:"";flex:1;height:1px;background:var(--lijn)}
.u-laag--diep .u-laag__kop::after{background:var(--lijn-donker)}

/* ---------- de rail: het uur van boven naar beneden ---------- */
.u-rail{position:relative;margin:2rem 0 0;padding-left:0;list-style:none}
.u-rail::before{content:"";position:absolute;left:74px;top:8px;bottom:8px;width:1px;background:var(--lijn)}
.u-laag--diep .u-rail::before{background:var(--lijn-donker)}
.u-halte{position:relative;display:grid;grid-template-columns:74px 1fr;gap:0 34px;padding:0 0 30px}
.u-halte__tijd{text-align:right;padding-top:3px}
.u-halte::after{
  content:"";position:absolute;left:70px;top:9px;width:9px;height:9px;
  background:var(--koper);border-radius:50%;
}
.u-halte__inhoud h3{margin-bottom:.35em}
.u-halte__inhoud p:last-child{margin-bottom:0}
.u-halte__duur{font-family:var(--kop);font-size:.82rem;color:var(--steen);display:block;margin-top:2px}
.u-laag--diep .u-halte__duur{color:var(--steen-licht)}

/* ---------- de verdeelbalk ---------- */
.u-balk{display:flex;width:100%;height:52px;overflow:hidden;border:1px solid var(--lijn);background:var(--wit)}
.u-laag--diep .u-balk{border-color:var(--lijn-donker);background:var(--den-diep)}
.u-blok{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--kop);font-size:.8rem;font-weight:600;letter-spacing:.02em;
  border-right:1px solid var(--lijn);color:var(--den);text-align:center;padding:0 4px;
  overflow:hidden;white-space:nowrap;
}
.u-blok:last-child{border-right:0}
.u-blok--a{background:#e7ece7}
.u-blok--b{background:#cfdcd3}
.u-blok--c{background:var(--koper);color:#12201a}
.u-blok--d{background:#dfd0bd}
.u-blok--e{background:#eeeae2}
.u-schaal{display:flex;justify-content:space-between;margin-top:8px}
.u-schaal span{font-family:var(--kop);font-size:.78rem;color:var(--steen);font-variant-numeric:tabular-nums}
.u-laag--diep .u-schaal span{color:var(--steen-licht)}

/* ---------- vakken ---------- */
.u-net{display:grid;gap:22px}
.u-net--2{grid-template-columns:repeat(2,1fr)}
.u-net--3{grid-template-columns:repeat(3,1fr)}
.u-vak{background:var(--wit);border:1px solid var(--lijn);padding:24px 22px}
.u-vak h3{margin-top:.15em}
.u-vak p:last-child,.u-vak ul:last-child{margin-bottom:0}
/* witte vakken binnen een donkere laag houden hun eigen kleuren */
.u-laag--diep .u-vak{background:var(--wit);border-color:transparent}
.u-laag--diep .u-vak h3,.u-laag--diep .u-vak h4{color:var(--den)}
.u-laag--diep .u-vak p,.u-laag--diep .u-vak li{color:var(--tekst)}
.u-laag--diep .u-vak .u-klok{color:var(--koper-tekst)}
.u-laag--diep .u-vak a{color:var(--koper-tekst)}

/* ---------- knoppen ---------- */
.u-gaan{
  display:inline-block;font-family:var(--kop);font-weight:600;font-size:.95rem;
  background:var(--koper-knop);color:var(--wit);text-decoration:none;
  padding:12px 22px;border:1px solid var(--koper-knop);
}
.u-gaan:hover{background:var(--den);border-color:var(--den);color:var(--wit)}
.u-gaan--leeg{background:transparent;color:var(--den);border-color:var(--den)}
.u-gaan--leeg:hover{background:var(--den);color:var(--wit)}
.u-laag--diep .u-gaan--leeg{color:var(--papier);border-color:rgba(247,246,241,.6)}
.u-laag--diep .u-gaan--leeg:hover{background:var(--papier);color:var(--den)}
.u-laag--diep .u-vak .u-gaan{color:var(--wit)}

/* ---------- beeld ---------- */
.u-beeld{margin:0}
.u-beeld img{width:100%}
.u-beeld figcaption{
  margin-top:9px;padding-top:8px;border-top:1px solid var(--lijn);
  font-size:.85rem;color:var(--steen);display:flex;gap:12px;align-items:baseline;
}
.u-laag--diep .u-beeld figcaption{color:var(--steen-licht);border-top-color:var(--lijn-donker)}

/* ---------- lijstjes ---------- */
.u-lijst{list-style:none;padding:0;margin:1rem 0}
.u-lijst li{position:relative;padding-left:22px;margin-bottom:.55em}
.u-lijst li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--koper)}
.u-laag--diep .u-lijst li::before{background:var(--koper-licht)}

/* ---------- aanbieders ---------- */
.u-partij{background:var(--wit);border:1px solid var(--lijn);padding:26px 24px;display:flex;flex-direction:column}
.u-partij h3{color:var(--den);margin-bottom:.2em}
.u-partij p,.u-partij li{color:var(--tekst)}
.u-partij__vlag{
  display:inline-block;font-family:var(--kop);font-size:.74rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:4px 10px;margin-bottom:14px;align-self:flex-start;
}
.u-partij__vlag--yh{background:#f3e2d0;color:#8a4708}
.u-partij__vlag--jp{background:#d8e8de;color:#12603c}
.u-partij__vlag--ldi{background:#efe6cc;color:#6f5713}
.u-partij .u-gaan{margin-top:auto;align-self:flex-start}
.u-laag--diep .u-partij h3{color:var(--den)}
.u-laag--diep .u-partij p,.u-laag--diep .u-partij li{color:var(--tekst)}
.u-laag--diep .u-partij a.u-gaan{color:var(--wit)}
.u-laag--diep .u-partij .u-lijst li::before{background:var(--koper)}

/* ---------- de doorloper (interactief) ---------- */
.u-loper{background:var(--wit);border:1px solid var(--lijn);padding:26px 24px}
.u-loper__knoppen{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.u-knop{
  font-family:var(--kop);font-size:.9rem;font-weight:600;background:var(--wit);
  color:var(--den);border:1px solid var(--den);padding:8px 15px;cursor:pointer;
}
.u-knop:hover{background:var(--papier-warm)}
.u-knop[aria-pressed="true"]{background:var(--den);color:var(--wit)}
.u-loper__spoor{position:relative;margin:6px 0 0}
.u-wijzer{position:absolute;top:-7px;bottom:-7px;width:2px;background:var(--den);transition:left .12s linear}
.u-wijzer::before{content:"";position:absolute;left:-4px;top:-6px;border:5px solid transparent;border-top-color:var(--den)}
.u-loper__uitleg{margin-top:22px;border-top:1px solid var(--lijn);padding-top:18px;min-height:132px}
.u-loper__uitleg h3{margin-bottom:.3em}
.u-loper__uitleg p:last-child{margin-bottom:0}
.u-loper__stand{font-family:var(--kop);font-variant-numeric:tabular-nums;font-size:1.35rem;font-weight:600;color:var(--den)}
.u-blok[role="button"]{cursor:pointer}
.u-blok[aria-pressed="true"]{outline:2px solid var(--den);outline-offset:-2px}

/* ---------- kleine dingen ---------- */
.u-kruimel{font-family:var(--kop);font-size:.85rem;color:var(--steen);padding:18px 0 0}
.u-kruimel a{color:var(--steen)}
.u-noot{font-size:.9rem;color:var(--steen);border-left:2px solid var(--koper);padding-left:14px;margin:1.6rem 0}
.u-laag--diep .u-noot{color:var(--steen-licht)}
.u-vraag{border-top:1px solid var(--lijn);padding:18px 0}
.u-vraag h3{margin-bottom:.3em}
.u-vraag p:last-child{margin-bottom:0}

.u-verder{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:2.2rem}
.u-verder a{
  display:block;background:var(--wit);border:1px solid var(--lijn);padding:20px;
  text-decoration:none;color:var(--tekst);
}
.u-verder a:hover{border-color:var(--den)}
.u-verder strong{font-family:var(--kop);color:var(--den);display:block;margin:.3em 0}

/* ---------- voet ---------- */
.u-voet{background:var(--den-diep);color:#d6ded8;padding:44px 0 30px;margin-top:0}
.u-voet h4{color:var(--papier);font-size:.95rem;margin-bottom:.6em}
.u-voet a{color:var(--koper-licht);text-decoration:none}
.u-voet a:hover{text-decoration:underline}
.u-voet__net{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.u-voet ul{list-style:none;padding:0;margin:0}
.u-voet li{margin-bottom:.4em;font-size:.94rem}
.u-voet__streep{border-top:1px solid #2b473c;margin-top:30px;padding-top:16px;font-size:.85rem;color:#a9b7ae}
.u-voet p{color:#d6ded8}

@media (max-width:900px){
  .u-opening__net{grid-template-columns:1fr;gap:30px}
  .u-net--3,.u-net--2,.u-voet__net,.u-verder{grid-template-columns:1fr}
  h1{font-size:1.95rem}
  .u-opening h1{font-size:2.05rem}
  .u-halte{grid-template-columns:64px 1fr;gap:0 20px}
  .u-rail::before{left:64px}
  .u-halte::after{left:60px}
  .u-klok--groot{font-size:1.14rem}
  .u-halte__duur{font-size:.74rem}
  .u-loper,.u-vak,.u-partij{padding-left:18px;padding-right:18px}
  .u-loper__knoppen{gap:8px}
  .u-blok{font-size:0}
  .u-blok--c{font-size:.75rem}
}

/* nagekomen correcties na de eerste proefopmaak */
.u-net--2 > .u-vak{align-self:start}
.u-beeld img{max-height:540px;object-fit:cover}
.u-opening__net > .u-beeld{align-self:start}

@media (max-width:900px){
  .u-laag__kop{flex-wrap:wrap;gap:4px 14px}
  .u-laag__kop .u-klok{flex:0 0 100%}
  .u-laag__kop h2{flex:1 1 auto}
  .u-loper__knoppen{gap:8px 10px}
  .u-loper__stand{margin-left:auto}
}