/* aanhuistraining.nl — "zo werkt het". Bladwijzer: de genummerde stap. */
:root{
  --inkt:#1f2427; --grijs:#5b6367; --lijn:#dfe3e4; --papier:#fbfaf6; --wit:#fff;
  --zee:#0e6b74; --zee-diep:#0a4f56; --zee-licht:#dcecee; --zee-tekst:#0b5a62;
  --zand:#d9b98a; --zand-licht:#f4ead9; --zand-tekst:#7a5a2a;
  --kop:"Avenir Next","Segoe UI",Futura,"Century Gothic","Trebuchet MS",sans-serif;
  --tekst:Verdana,Geneva,Tahoma,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--inkt);font-family:var(--tekst);font-size:16px;line-height:1.7}
img,video,svg{max-width:100%}
a{color:var(--zee-tekst)} a:hover{color:var(--inkt)}
h1,h2,h3,h4{font-family:var(--kop);font-weight:700;line-height:1.18;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:2.3rem} h2{font-size:1.55rem} h3{font-size:1.12rem} h4{font-size:.98rem}
p{margin:0 0 1.1em} ul,ol{margin:0 0 1.1em;padding-left:1.2em} li{margin-bottom:.35em}

.a-vak{max-width:1040px;margin:0 auto;padding:0 20px}
.a-lees{max-width:720px}
.a-blok{padding:56px 0}
.a-blok--wit{background:var(--wit)}
.a-blok--zee{background:var(--zee-diep);color:#e6f1f2}
.a-blok--zee h1,.a-blok--zee h2,.a-blok--zee h3{color:#fff}
.a-blok--zee a{color:#bfe3e6} .a-blok--zee a:hover{color:#fff}
.a-blok--zand{background:var(--zand-licht)}
.a-blok--strak{padding:34px 0}

/* stapnummer: het handschrift */
.a-nr{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--zee);color:#fff;font-family:var(--kop);font-weight:700;font-size:1.05rem;margin-bottom:12px}
.a-nr--zand{background:var(--zand);color:var(--inkt)}
.a-blok--zee .a-nr{background:#fff;color:var(--zee-diep)}
.a-label{font-family:var(--kop);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--zee-tekst);margin-bottom:8px;display:block}
.a-blok--zee .a-label{color:#bfe3e6}

/* kop */
.a-top{background:var(--wit);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:5}
.a-top__rij{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;flex-wrap:wrap}
.a-merk{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--inkt)}
.a-merk b{font-family:var(--kop);font-size:1.08rem;display:block;line-height:1.1}
.a-merk small{font-size:.74rem;color:var(--grijs);letter-spacing:.08em;text-transform:uppercase}
.a-nav{display:flex;flex-wrap:wrap;gap:2px 6px}
.a-nav a{font-family:var(--kop);font-size:.96rem;color:var(--inkt);text-decoration:none;padding:6px 10px;border-radius:20px}
.a-nav a:hover{background:var(--zee-licht)}
.a-nav a[aria-current]{background:var(--zee);color:#fff}

/* hero */
.a-hero{position:relative;background:var(--zee-diep);color:#fff;overflow:hidden}
.a-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38}
.a-hero__in{position:relative;padding:80px 0 66px}
.a-hero h1{color:#fff;max-width:16ch}
.a-hero p{color:#dbe9ea;max-width:54ch;font-size:1.06rem}
.a-hero .a-label{color:#bfe3e6}

/* stappenrail */
.a-rail{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));counter-reset:stap}
.a-stap{background:var(--wit);border:1px solid var(--lijn);border-radius:8px;padding:20px 20px 18px;position:relative}
.a-stap h3{margin-bottom:.3em}
.a-stap p{margin:0;font-size:.95rem;color:#3d4448}

/* kaarten en rasters */
.a-raster{display:grid;gap:18px}
.a-raster--2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.a-raster--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.a-kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:8px;padding:22px 22px 18px}
.a-kaart h3{margin-bottom:.35em}
.a-kaart p:last-child,.a-kaart ul:last-child{margin-bottom:0}
.a-blok--zee .a-kaart{background:#0f5f68;border-color:#1d7a84;color:#e6f1f2}
.a-blok--zee .a-kaart h3{color:#fff}

/* stepper-module */
.a-keuze{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.a-keuze button{font-family:var(--kop);font-weight:700;font-size:.95rem;border:1px solid var(--lijn);background:var(--wit);
  color:var(--inkt);border-radius:24px;padding:9px 16px;cursor:pointer}
.a-keuze button:hover{border-color:var(--zee)}
.a-keuze button[aria-pressed="true"]{background:var(--zee);border-color:var(--zee);color:#fff}
.a-paneel{background:var(--wit);border:1px solid var(--lijn);border-radius:8px;padding:24px 26px}
.a-paneel h3{margin-bottom:.2em}
.a-paneel .a-tijd{font-family:var(--kop);color:var(--zee-tekst);font-size:.9rem;margin-bottom:12px;display:block}
.a-paneel ul{margin-bottom:0}

/* beeld */
.a-foto{margin:0 0 22px}
.a-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;height:auto;border-radius:8px;display:block}
.a-foto figcaption{font-size:.86rem;color:var(--grijs);margin-top:8px;padding-top:8px;border-top:2px solid var(--zand)}

/* knoppen */
.a-knop{display:inline-block;font-family:var(--kop);font-weight:700;font-size:1rem;background:var(--zee);color:#fff;
  text-decoration:none;padding:13px 22px;border-radius:26px}
.a-knop:hover{background:var(--zee-diep);color:#fff}
.a-knop--licht{background:#fff;color:var(--zee-diep);border:1px solid var(--lijn)}
.a-knop--licht:hover{background:var(--zee-licht);color:var(--zee-diep)}

/* vraag en antwoord */
.a-vraag{border-top:1px solid var(--lijn);padding:18px 0}
.a-vraag:last-child{border-bottom:1px solid var(--lijn)}
.a-vraag h3{font-size:1.05rem;margin-bottom:.3em}
.a-vraag p:last-child{margin-bottom:0}

/* tabel */
.a-tabel{width:100%;border-collapse:collapse;background:var(--wit);font-size:.94rem}
.a-tabel th,.a-tabel td{border:1px solid var(--lijn);padding:10px 12px;text-align:left;vertical-align:top}
.a-tabel th{font-family:var(--kop);background:var(--zee-licht)}
.a-schuif{overflow-x:auto}

/* verder */
.a-verder{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.a-verder a{display:block;background:var(--wit);border:1px solid var(--lijn);border-radius:8px;padding:18px;text-decoration:none;color:var(--inkt)}
.a-verder a:hover{border-color:var(--zee)}
.a-verder strong{font-family:var(--kop);display:block;font-size:1.02rem;margin-bottom:4px}
.a-verder span{font-size:.9rem;color:var(--grijs)}

.a-noot{background:var(--zee-licht);border-radius:8px;padding:18px 22px;margin:0 0 20px}
.a-noot p:last-child{margin-bottom:0}

/* voet */
.a-voet{background:#15292d;color:#c9d6d8;padding:46px 0 30px;font-size:.94rem}
.a-voet h4{color:#fff;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.a-voet a{color:#c9d6d8;text-decoration:none} .a-voet a:hover{color:#fff;text-decoration:underline}
.a-voet ul{list-style:none;padding:0;margin:0}
.a-voet__net{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.a-voet__eind{border-top:1px solid #2b4448;margin-top:30px;padding-top:18px;color:#93a6a9;font-size:.86rem}

@media (max-width:760px){
  h1{font-size:1.8rem} h2{font-size:1.34rem}
  .a-blok{padding:40px 0} .a-hero__in{padding:56px 0 46px}
  .a-top{position:static}
}