/* Van Buel Sports — losse les- en pijlerpagina's.
   Zelfde huisstijl als index.html, maar zelfstandig: deze pagina's moeten
   ook zonder de single-page app kloppen, want daar leest Google ze. */
:root{
  --carbon:#0B0D10; --surface:#12151A; --surface2:#171B22;
  --led:#F5F7FA; --muted:#9AA3AD;
  --blauw:#1F4FD8; --blauw-fel:#2F66FF;
  --line:rgba(245,247,250,.09);
  --acc:var(--blauw-fel);
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--carbon);color:var(--led);font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  font-size:17.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:var(--led)}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.4rem)}
.display{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 118,'wght' 880;
  letter-spacing:-.015em;line-height:.96;text-transform:uppercase}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--acc)}
.mono{font-family:'JetBrains Mono',monospace}

/* ---------- balk bovenin ---------- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(11,13,16,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:1.2rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 120,'wght' 900;text-transform:uppercase;font-size:1rem;
  text-decoration:none;white-space:nowrap}
.brand img{width:38px;height:auto}
.topnav{display:flex;gap:1.15rem;margin-left:auto;align-items:center}
.topnav a{font-size:.9rem;color:var(--muted);text-decoration:none;white-space:nowrap}
.topnav a:hover{color:var(--led)}
.topnav .btn{color:#fff}
.topcta{flex:none}
/* Op de telefoon zakken de menulinks naar een eigen regel onder het logo.
   Ze verbergen achter een hamburger zou hier verkeerd zijn: wie via Google
   op een lespagina binnenkomt moet meteen zien dat er een rooster en
   tarieven zijn. */
@media (max-width:860px){
  .topbar .wrap{flex-wrap:wrap;gap:.5rem;padding-top:.55rem;padding-bottom:0;min-height:0}
  .topnav{order:3;width:100%;margin-left:0;gap:0;justify-content:space-between;
    border-top:1px solid var(--line)}
  .topnav a{flex:1;justify-content:center;display:inline-flex;align-items:center;
    min-height:46px;font-size:.88rem;text-align:center}
  .topcta{margin-left:auto;padding:.6rem 1.05rem;font-size:.86rem}
}
@media (max-width:380px){
  .topnav a{font-size:.8rem}
  .topcta{padding:.6rem .85rem}
}

.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.92rem;
  padding:.72rem 1.35rem;background:var(--blauw);color:#fff;border:1px solid var(--blauw);
  text-decoration:none;transition:.18s;cursor:pointer}
.btn:hover{background:var(--blauw-fel);border-color:var(--blauw-fel);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--led);border-color:rgba(245,247,250,.28)}
.btn.ghost:hover{border-color:var(--led);background:rgba(245,247,250,.06)}
.btn.acc{background:var(--acc);border-color:var(--acc);color:#0b0d10}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(3.4rem,9vw,6rem) 0 clamp(2.4rem,6vw,3.6rem);
  background-size:cover;background-position:center;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,13,16,.45) 0%,rgba(11,13,16,.86) 62%,var(--carbon) 100%)}
.hero>.wrap{position:relative;z-index:2}
.kruimel{font-size:.82rem;color:var(--muted);margin-bottom:1rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.kruimel a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.kruimel a:hover{color:var(--led);border-bottom-color:var(--acc)}
.kruimel b{color:var(--led);font-weight:600}
h1.display{font-size:clamp(2.4rem,6.4vw,4.6rem);margin:.5rem 0 1rem}
.lede{font-size:clamp(1.02rem,1.7vw,1.2rem);color:#cdd2d9;max-width:62ch}
.herocta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}

/* ---------- secties ---------- */
section{padding:clamp(2.4rem,6vw,4rem) 0}
section+section{padding-top:0}
h2.display{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:1.2rem}
h3.display{font-size:clamp(1.05rem,1.8vw,1.3rem)}

/* ---------- feitenblok ---------- */
.feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.feit{background:var(--surface);padding:1.1rem 1.25rem}
.feit dt{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.feit dd{font-size:.98rem;line-height:1.45}
.feit dd a{color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(47,102,255,.35)}

/* ---------- rooster ---------- */
.rooster{width:100%;border-collapse:collapse;font-size:.95rem}
.rooster caption{text-align:left;color:var(--muted);font-size:.86rem;padding-bottom:.7rem}
.rooster th,.rooster td{text-align:left;padding:.72rem .9rem;border-bottom:1px solid var(--line)}
.rooster th{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.rooster tbody tr:hover{background:var(--surface)}
.rooster td:first-child{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112,'wght' 800;
  text-transform:uppercase;color:var(--acc);white-space:nowrap}
.rooster td:nth-child(2){font-family:'JetBrains Mono',monospace;white-space:nowrap}
.tabelrol{overflow-x:auto}

/* ---------- trainer ---------- */
.trainer{display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:start;
  background:var(--surface);border:1px solid var(--line);padding:1.4rem clamp(1.2rem,3vw,1.8rem)}
.trainer .av{width:74px;height:74px;border-radius:50%;object-fit:cover;background:var(--surface2)}
.trainer .avtxt{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:var(--acc);color:#0b0d10;font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 118,'wght' 880;font-size:1.3rem}
.trainer .rol{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:.2rem}
.trainer blockquote{margin-top:.9rem;font-size:1.02rem;color:#cdd2d9;border-left:3px solid var(--acc);
  padding-left:1rem}
.trainer .naar{display:inline-block;margin-top:.9rem;font-size:.9rem;color:var(--acc);
  text-decoration:none;border-bottom:1px solid rgba(47,102,255,.4)}
@media (max-width:560px){ .trainer{grid-template-columns:1fr} }

/* ---------- foto's ---------- */
.gal{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gal .foto{aspect-ratio:4/3;background-size:cover;background-position:center;border:1px solid var(--line)}
.gal.staand{grid-template-columns:1.05fr 1fr}
.gal.staand .foto.groot{aspect-ratio:3/4;grid-row:span 2}
.gal.staand .strip{display:grid;grid-template-rows:1fr 1fr;gap:.6rem}
.gal.staand .strip .foto{aspect-ratio:auto;height:100%;min-height:120px}

/* ---------- oproep ---------- */
.cta{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--acc);
  padding:clamp(1.4rem,3.5vw,2rem)}
.cta h2{margin-bottom:.6rem}
.cta p{color:#cdd2d9;max-width:60ch}
.cta .knoppen{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}

/* ---------- kaartjes andere lessen ---------- */
.kaarten{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.kaart{display:block;background:var(--surface);border:1px solid var(--line);padding:1.15rem 1.25rem;
  text-decoration:none;transition:.18s;position:relative}
.kaart:hover{border-color:var(--acc);transform:translateY(-2px);background:var(--surface2)}
.kaart .wanneer{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc)}
.kaart h3{margin:.45rem 0 .35rem}
.kaart p{font-size:.9rem;color:var(--muted);line-height:1.5}
.kaart .pijl{position:absolute;top:1.1rem;right:1.2rem;color:var(--acc)}

.badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.badge{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);padding:.4rem .8rem}

/* ---------- voet ---------- */
footer{border-top:1px solid var(--line);margin-top:clamp(3rem,7vw,5rem);padding:2.4rem 0;color:var(--muted);font-size:.9rem}
footer .kolom{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:space-between;align-items:flex-start}
footer a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{color:var(--led);border-bottom-color:var(--blauw-fel)}
footer .links{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
footer .adres{font-style:normal;line-height:1.7}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ---------- klein scherm ---------- */
@media (max-width:430px){
  /* De merknaam wijkt voor de proefles-knop; het logo blijft staan. */
  .brandnaam{display:none}
}
@media (max-width:620px){
  /* Een tabel van vier kolommen past hier niet. Elke lesdag wordt een blokje
     met de veldnamen ervoor, zodat je niks hoeft weg te scrollen. */
  .rooster caption{display:block;width:100%}
  .rooster thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rooster,.rooster tbody,.rooster tr,.rooster td{display:block;width:100%}
  .rooster tr{border:1px solid var(--line);background:var(--surface);padding:.85rem 1rem;margin-bottom:.6rem}
  .rooster td{border:none;padding:.12rem 0;display:flex;gap:.7rem;align-items:baseline}
  .rooster td::before{content:attr(data-kop);font-family:'JetBrains Mono',monospace;font-size:.62rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:0 0 4.6rem}
  .rooster td:first-child{font-size:1.05rem}
  .tabelrol{overflow-x:visible}
}

/* ---------- ruimere aanraakvlakken op de telefoon ---------- */
@media (max-width:860px){
  .kruimel{gap:.15rem}
  .kruimel a{padding:.5rem .15rem}
  .feit dd a,.trainer .naar{display:inline-block;padding:.4rem 0}
  footer .links{gap:0 .9rem}
  footer .links a{display:inline-block;padding:.45rem 0}
  footer .adres a{display:inline-block;padding:.3rem 0}
}