/* ==================================================================
   aanhuispersonaltrainer.nl — stijlblad "Catalogus"
   Productcatalogus: dikke zwarte kaders, genummerde artikelen,
   koppen in kleine letters, veel wit. Voorvoegsel: g-
   ================================================================== */

:root{
  --zwart:#111310;
  --zwart-zacht:#2a2c26;
  --olijf:#55701a;        /* tekst op licht */
  --limoen:#9ecf2b;       /* vlak, met zwarte tekst erop */
  --papier:#fbfbf7;
  --papier-warm:#eeeee4;
  --grijsgroen:#63695d;
  --lijn:#d5d5c8;
  --wit:#ffffff;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--zwart);
  font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  font-size:17px;line-height:1.66;
}

/* koppen in kleine letters — signatuur van deze site */
h1,h2,h3,h4{
  font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  font-weight:800;letter-spacing:-.032em;line-height:1.08;
  text-transform:lowercase;margin:0 0 .5em;color:var(--zwart);
}
h1{font-size:clamp(2.2rem,5.4vw,4rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.5rem)}
h3{font-size:1.16rem;letter-spacing:-.018em;line-height:1.25}
h4{font-size:.98rem}
p{margin:0 0 1.05em}
a{color:var(--olijf)}
a:hover{color:var(--zwart)}
img{display:block;max-width:100%;height:auto}

.g-baan{width:min(1180px,100% - 40px);margin-inline:auto}
.g-smal{width:min(690px,100% - 40px);margin-inline:auto}

/* --- kopbalk --- */
.g-balk{background:var(--papier);border-bottom:3px solid var(--zwart);position:sticky;top:0;z-index:60}
.g-balk__in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0;flex-wrap:wrap}
.g-merk{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--zwart);
  font-weight:800;letter-spacing:-.03em;font-size:1.06rem;text-transform:lowercase;
}
.g-merk i{display:block;width:26px;height:26px;background:var(--limoen);border:2px solid var(--zwart);flex:none}
.g-nav{display:flex;flex-wrap:wrap;gap:2px}
.g-nav a{
  color:var(--zwart-zacht);text-decoration:none;font-size:.87rem;padding:7px 11px;
  font-weight:600;border:2px solid transparent;
}
.g-nav a:hover{border-color:var(--zwart)}
.g-nav a[aria-current]{background:var(--zwart);color:var(--papier)}

/* --- opening --- */
.g-start{padding:56px 0 8px}
.g-start__raster{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center}
.g-etiket{
  display:inline-block;background:var(--limoen);color:var(--zwart);
  font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 10px;border:2px solid var(--zwart);margin-bottom:18px;
}
.g-start p.g-lead{font-size:1.08rem;max-width:47ch;color:#33362e}
.g-film{border:3px solid var(--zwart);background:var(--papier-warm)}
.g-film video{display:block;width:100%;height:auto}
.g-film__band{
  border-top:3px solid var(--zwart);background:var(--zwart);color:var(--papier);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;font-weight:700;
}

/* --- knoppen, hoekig met harde schaduw --- */
.g-knop{
  display:inline-block;text-decoration:none;font-weight:800;font-size:.9rem;
  padding:13px 24px;border:3px solid var(--zwart);background:var(--limoen);color:var(--zwart);
  box-shadow:4px 4px 0 var(--zwart);transition:transform .12s,box-shadow .12s;
}
.g-knop:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--zwart);color:var(--zwart)}
.g-knop--leeg{background:var(--papier)}
.g-knoppen{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* --- secties --- */
.g-vak{padding:60px 0;border-top:3px solid var(--zwart)}
.g-vak--warm{background:var(--papier-warm)}
.g-vak--zwart{background:var(--zwart);color:#dcdcd2}
.g-vak--zwart h2,.g-vak--zwart h3{color:var(--papier)}
.g-vak--zwart a{color:var(--limoen)}
/* witte kaarten binnen een zwarte sectie houden hun eigen kleuren */
.g-vak--zwart .g-artikel h3,.g-vak--zwart .g-stuk h3{color:var(--zwart)}
.g-vak--zwart .g-artikel p,.g-vak--zwart .g-artikel li,
.g-vak--zwart .g-stuk p{color:#3a3d35}
.g-vak--zwart .g-artikel a.g-knop,.g-vak--zwart .g-kiezer a.g-knop{color:var(--zwart)}
.g-vak--zwart .g-kiezer h3{color:var(--zwart)}
.g-vak--zwart .g-kiezer__kop h3{color:var(--papier)}
.g-vak--zwart .g-kiezer p,.g-vak--zwart .g-kiezer li{color:#3a3d35}

.g-titel{display:flex;align-items:baseline;gap:16px;margin-bottom:34px;flex-wrap:wrap}
.g-titel__nr{
  font-size:.74rem;font-weight:800;letter-spacing:.14em;
  border:2px solid var(--zwart);padding:4px 8px;white-space:nowrap;
}
.g-vak--zwart .g-titel__nr{border-color:var(--limoen);color:var(--limoen)}
.g-titel p{width:100%;color:var(--grijsgroen);max-width:58ch;margin:.4em 0 0}
.g-vak--zwart .g-titel p{color:#a8ada2}

/* --- artikelen: catalogusblokken --- */
.g-artikelen{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g-artikel{border:3px solid var(--zwart);background:var(--wit);display:flex;flex-direction:column}
.g-artikel img{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:3px solid var(--zwart)}
.g-artikel__kop{display:flex;align-items:center;gap:9px;padding:14px 16px 0}
.g-artikel__nr{
  background:var(--zwart);color:var(--limoen);font-size:.7rem;font-weight:800;
  letter-spacing:.1em;padding:3px 7px;
}
.g-artikel__body{padding:6px 16px 18px;display:flex;flex-direction:column;flex:1}
.g-artikel p{font-size:.94rem;color:#3a3d35;margin:0 0 12px}
.g-artikel dl{margin:0 0 14px;font-size:.85rem;display:grid;grid-template-columns:auto 1fr;gap:2px 10px}
.g-artikel dt{font-weight:800;color:var(--olijf);text-transform:lowercase}
.g-artikel dd{margin:0;color:#3a3d35}
.g-oordeel{
  margin-top:auto;border-top:2px dashed var(--lijn);padding-top:11px;
  font-size:.84rem;font-weight:700;
}
.g-oordeel--ja{color:var(--olijf)}
.g-oordeel--nee{color:#8a3312}

/* --- kiezer (interactief) --- */
.g-kiezer{border:3px solid var(--zwart);background:var(--wit)}
.g-kiezer__kop{background:var(--zwart);color:var(--papier);padding:14px 20px}
.g-kiezer__kop h3{color:var(--papier);margin:0}
.g-kiezer__kop p{margin:.3em 0 0;font-size:.9rem;color:#a8ada2}
.g-kiezer__body{display:grid;grid-template-columns:1fr 1fr;gap:0}
.g-vinkjes{padding:20px 22px;border-right:3px solid var(--zwart)}
.g-vinkje{display:flex;gap:11px;align-items:flex-start;padding:8px 0;cursor:pointer}
.g-vinkje input{width:20px;height:20px;margin:2px 0 0;accent-color:#55701a;flex:none;cursor:pointer}
.g-vinkje span{font-size:.95rem}
.g-vinkje b{display:block;font-size:.79rem;color:var(--grijsgroen);font-weight:400}
.g-uitkomst{padding:20px 22px;background:var(--papier-warm)}
.g-uitkomst h4{margin:0 0 .5em;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--olijf)}
.g-uitkomst ul{list-style:none;margin:0 0 16px;padding:0}
.g-uitkomst li{font-size:.94rem;padding:4px 0 4px 20px;position:relative}
.g-uitkomst li::before{content:"→";position:absolute;left:0;color:var(--olijf);font-weight:800}
.g-uitkomst__tip{border-top:2px solid var(--zwart);padding-top:12px;font-size:.92rem}
.g-uitkomst__tip strong{display:block;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--olijf);margin-bottom:.3em}

/* --- lijstblokken --- */
.g-blokken{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;background:var(--zwart);border:3px solid var(--zwart)}
.g-blok{background:var(--papier);padding:22px 24px}
.g-vak--zwart .g-blok{background:var(--zwart-zacht)}
.g-blok h3{margin-bottom:.3em}
.g-blok p{font-size:.94rem;color:#3a3d35;margin:0}
.g-vak--zwart .g-blok p{color:#b2b7ab}

/* --- vraag en antwoord --- */
.g-vragen{max-width:790px;border-top:3px solid var(--zwart)}
.g-vragen details{border-bottom:2px solid var(--lijn)}
.g-vragen summary{cursor:pointer;list-style:none;padding:17px 40px 17px 0;position:relative;font-weight:800}
.g-vragen summary::-webkit-details-marker{display:none}
.g-vragen summary::after{
  content:"";position:absolute;right:6px;top:23px;width:14px;height:3px;background:var(--zwart);
}
.g-vragen summary::before{
  content:"";position:absolute;right:11px;top:18px;width:3px;height:13px;background:var(--zwart);
  transition:transform .18s;
}
.g-vragen details[open] summary::before{transform:scaleY(0)}
.g-vragen p{padding:0 0 17px;margin:0;color:#3a3d35}

/* --- stukken --- */
.g-stukken{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g-stuk{border:3px solid var(--zwart);background:var(--wit);display:flex;flex-direction:column}
.g-stuk img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:3px solid var(--zwart)}
.g-stuk__t{padding:17px 18px 20px;display:flex;flex-direction:column;flex:1}
.g-stuk h3{font-size:1.04rem;margin-bottom:.35em}
.g-stuk h3 a{color:var(--zwart);text-decoration:none}
.g-stuk h3 a:hover{color:var(--olijf)}
.g-stuk p{font-size:.92rem;color:#3a3d35;margin:0 0 14px}
.g-stuk__meer{margin-top:auto;font-weight:800;font-size:.85rem;text-decoration:none}

/* --- artikelpagina --- */
.g-stukkop{border-top:3px solid var(--zwart);background:var(--papier-warm);padding:46px 0}
.g-tekst{padding:38px 0 58px}
.g-tekst h2{margin-top:1.6em}
.g-tekst ul,.g-tekst ol{padding-left:1.2em}
.g-tekst li{margin-bottom:.45em}
.g-uitlicht{border:3px solid var(--zwart);border-left-width:10px;background:var(--wit);padding:18px 22px;margin:1.7em 0}
.g-uitlicht p:last-child{margin-bottom:0}

/* --- slot --- */
.g-slot{background:var(--limoen);border-top:3px solid var(--zwart);padding:54px 0;text-align:center}
.g-slot h2{color:var(--zwart)}
.g-slot p{max-width:48ch;margin:0 auto 6px;color:#22270f}

/* --- voet --- */
.g-voet{background:var(--zwart);color:#a3a89c;padding:44px 0 20px;font-size:.9rem}
.g-voet h4{color:var(--papier);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.9em}
.g-voet a{color:#c8ccbf;text-decoration:none}
.g-voet a:hover{color:var(--limoen)}
.g-voet__kol{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:34px;margin-bottom:26px}
.g-voet__slot{border-top:2px solid #33362e;padding-top:15px;font-size:.8rem;color:#8b9084}

@media(max-width:940px){
  .g-start__raster{grid-template-columns:1fr;gap:32px}
  .g-artikelen,.g-stukken,.g-voet__kol,.g-blokken{grid-template-columns:1fr}
  .g-kiezer__body{grid-template-columns:1fr}
  .g-vinkjes{border-right:0;border-bottom:3px solid var(--zwart)}
  .g-vak{padding:44px 0}
}