/* personalfitnessaanhuis.nl — "samen". Bladwijzer: twee overlappende cirkels en de tweekoloms 'jij / de ander'. */
:root{
  --inkt:#1d2a2b; --grijs:#5d6b6c; --lijn:#dde3e1; --papier:#f6f4ef; --wit:#fff;
  --petrol:#167a78; --petrol-diep:#0f5654; --petrol-licht:#dcefee; --petrol-tekst:#11605e;
  --oranje:#e07a2d; --oranje-diep:#b85f1a; --oranje-licht:#fbe8d8; --oranje-tekst:#9a4d12;
  --kop:Rockwell,"Roboto Slab","Bitstream Vera Serif","DejaVu Serif",Georgia,serif;
  --tekst:Arial,"Liberation Sans","Helvetica Neue",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.66}
img,video,svg{max-width:100%}
a{color:var(--petrol-tekst)} a:hover{color:var(--oranje-tekst)}
h1,h2,h3,h4{font-family:var(--kop);font-weight:700;line-height:1.15;margin:0 0 .5em}
h1{font-size:2.4rem} h2{font-size:1.6rem} h3{font-size:1.15rem} h4{font-size:.95rem}
p{margin:0 0 1.1em} ul,ol{margin:0 0 1.1em;padding-left:1.2em} li{margin-bottom:.35em}

.d-bak{max-width:1060px;margin:0 auto;padding:0 20px}
.d-smal{max-width:720px}
.d-strook{padding:56px 0}
.d-strook--wit{background:var(--wit)}
.d-strook--petrol{background:var(--petrol-diep);color:#e3f0ef}
.d-strook--petrol h1,.d-strook--petrol h2,.d-strook--petrol h3{color:#fff}
.d-strook--petrol a{color:#f6c9a3} .d-strook--petrol a:hover{color:#fff}
.d-strook--oranje{background:var(--oranje-licht)}
.d-strook--licht{background:var(--petrol-licht)}

/* twee cirkels */
.d-duo{display:inline-block;width:44px;height:26px;position:relative;margin-bottom:10px}
.d-duo::before,.d-duo::after{content:"";position:absolute;top:0;width:26px;height:26px;border-radius:50%}
.d-duo::before{left:0;background:var(--petrol)}
.d-duo::after{left:18px;background:var(--oranje);opacity:.9}
.d-kicker{font-family:var(--tekst);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol-tekst);display:block;margin-bottom:8px}
.d-strook--petrol .d-kicker{color:#f6c9a3}

/* jij / de ander */
.d-twee{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--lijn);border-radius:6px;overflow:hidden;background:var(--wit);margin:0 0 22px}
.d-twee > div{padding:20px 22px}
.d-twee > div:first-child{border-right:1px solid var(--lijn);border-top:5px solid var(--petrol)}
.d-twee > div:last-child{border-top:5px solid var(--oranje)}
.d-twee h3{margin-bottom:.35em}
.d-twee p:last-child,.d-twee ul:last-child{margin-bottom:0}

/* kop */
.d-top{background:var(--wit);border-bottom:1px solid var(--lijn)}
.d-top__rij{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;flex-wrap:wrap}
.d-merk{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--inkt)}
.d-merk b{font-family:var(--kop);font-size:1.1rem;display:block;line-height:1.1}
.d-merk small{font-size:.72rem;color:var(--grijs);letter-spacing:.1em;text-transform:uppercase}
.d-nav{display:flex;flex-wrap:wrap;gap:4px 8px}
.d-nav a{font-family:var(--tekst);font-weight:700;font-size:.9rem;color:var(--inkt);text-decoration:none;padding:6px 11px;border-radius:4px;border:1px solid transparent}
.d-nav a:hover{border-color:var(--petrol)}
.d-nav a[aria-current]{background:var(--petrol);color:#fff}

/* hero */
.d-hero{position:relative;background:var(--petrol-diep);color:#fff;overflow:hidden}
.d-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.d-hero__in{position:relative;padding:82px 0 68px}
.d-hero h1{color:#fff;max-width:17ch;font-size:2.8rem}
.d-hero p{color:#dcecea;max-width:54ch;font-size:1.06rem}
.d-hero .d-kicker{color:#f6c9a3}

/* raster */
.d-net{display:grid;gap:18px}
.d-net--2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.d-net--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.d-kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:6px;padding:22px 22px 18px}
.d-kaart h3{margin-bottom:.35em}
.d-kaart p:last-child,.d-kaart ul:last-child{margin-bottom:0}
.d-kaart--oranje{border-top:5px solid var(--oranje)}
.d-kaart--petrol{border-top:5px solid var(--petrol)}
.d-strook--petrol .d-kaart{background:#146260;border-color:#1f7c79;color:#e3f0ef}
.d-strook--petrol .d-kaart h3{color:#fff}
a.d-kaart{display:block;text-decoration:none;color:var(--inkt)}
a.d-kaart:hover{border-color:var(--oranje)}
a.d-kaart span{font-size:.92rem;color:var(--grijs);display:block}

/* module */
.d-kies{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.d-kies button{font-family:var(--tekst);font-weight:700;font-size:.92rem;border:1px solid var(--lijn);background:var(--wit);color:var(--inkt);border-radius:4px;padding:9px 14px;cursor:pointer}
.d-kies button:hover{border-color:var(--oranje)}
.d-kies button[aria-pressed="true"]{background:var(--oranje-tekst);border-color:var(--oranje-tekst);color:#fff}
.d-paneel{background:var(--wit);border:1px solid var(--lijn);border-radius:6px;padding:24px 26px}
.d-paneel h3{margin-bottom:.25em}
.d-paneel .d-sub{color:var(--grijs);margin-bottom:14px}

/* beeld */
.d-foto{margin:0 0 22px}
.d-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;height:auto;border-radius:6px;display:block}
.d-foto figcaption{font-size:.88rem;color:var(--grijs);margin-top:9px;padding-left:12px;border-left:3px solid var(--oranje)}

/* knop */
.d-knop{display:inline-block;font-family:var(--tekst);font-weight:700;font-size:.98rem;background:var(--oranje-tekst);color:#fff;text-decoration:none;padding:12px 22px;border-radius:4px}
.d-knop:hover{background:#7d3d0c;color:#fff}
.d-strook--petrol .d-knop{color:#fff} .d-strook--petrol .d-knop:hover{color:#fff}
.d-knop--petrol{background:var(--petrol)} .d-knop--petrol:hover{background:var(--petrol-diep)}

.d-noot{background:var(--petrol-licht);border-radius:6px;padding:18px 22px;margin:0 0 20px}
.d-noot p:last-child{margin-bottom:0}
.d-tabel{width:100%;border-collapse:collapse;background:var(--wit);font-size:.94rem}
.d-tabel th,.d-tabel td{border:1px solid var(--lijn);padding:10px 12px;text-align:left;vertical-align:top}
.d-tabel th{font-family:var(--kop);background:var(--petrol-licht)}
.d-rol{overflow-x:auto}

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

@media (max-width:760px){
  h1{font-size:1.85rem} .d-hero h1{font-size:2rem} h2{font-size:1.4rem}
  .d-strook{padding:40px 0} .d-hero__in{padding:56px 0 46px}
  .d-twee{grid-template-columns:1fr}
  .d-twee > div:first-child{border-right:0;border-bottom:1px solid var(--lijn)}
}