/* Aanpak-pagina. Alles met voorvoegsel ap, zodat er niets botst met lab.css of
   met de families op de kunnen-pagina. Geen JavaScript: deze pagina heeft niets
   nodig dat beweegt, op één pulserend puntje in de knop "bezig" na.

   Kleuren komen uit lab.css. Contrast op dit thema, nagemeten:
     #F3EBDD op #0D0B09 = 15,8:1   koppen
     #C9BFAF op #15110E =  9,7:1   lopende tekst in panelen
     #C9A227 op #0D0B09 =  7,4:1   labels en het knopvlak (donkere letters erop)
     #ADA398 op #3A342C =  4,96:1  uitgeschakelde knop
   Alle tekst hieronder staat op een van deze combinaties. */

.ap-blok{
  width:var(--breed);margin:0 auto;
  padding:clamp(3rem,8vh,5rem) 0;
  border-top:1px solid var(--lijn);
}
.ap-kop{max-width:62ch}
.ap-nr{font-family:var(--kop);font-size:.9375rem;color:var(--goud);letter-spacing:.2em}
.ap-blok h2{font-size:clamp(1.75rem,4vw,2.5rem);margin:.5rem 0 1.25rem}
.ap-blok h3{
  font-family:var(--kop);font-weight:400;line-height:1.25;
  font-size:clamp(1.25rem,2.4vw,1.5rem);
  margin:2rem 0 .625rem;color:var(--deeg);
}

/* Lopende tekst blijft binnen 66 tekens; dat is de regellengte waar blok 04
   over gaat, dus die houdt deze pagina zelf ook aan. */
.ap-blok p{color:var(--deeg-zacht);max-width:66ch;margin:0 0 1rem;text-wrap:pretty}
.ap-lood{font-size:clamp(1.0625rem,2.2vw,1.1875rem);color:var(--deeg);
  max-width:56ch;margin:0 0 1.5rem}
.ap-klein{font-size:.9375rem;color:var(--deeg-zacht)}
.ap-blok b{color:var(--deeg);font-weight:600}

/* Sprongnavigatie naar de negen stappen. Wikkelt op 360px naar meerdere regels
   in plaats van te scrollen. */
.ap-wegwijzer{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.ap-wegwijzer a{
  font-size:.8125rem;text-decoration:none;color:var(--deeg);
  padding:.5rem .875rem;border:1px solid var(--lijn);border-radius:999px;
  background:var(--grond-op);
  transition:border-color .2s ease,color .2s ease;
}
.ap-wegwijzer a:hover{border-color:var(--goud);color:var(--goud-licht)}
.ap-wegwijzer a:focus-visible{outline:2px solid var(--goud-licht);outline-offset:3px}

/* Lijsten. */
.ap-lijst{margin:1rem 0 1.25rem;padding-left:1.15rem;color:var(--deeg-zacht);max-width:66ch}
.ap-lijst li{margin:.625rem 0;text-wrap:pretty}
.ap-lijst li::marker{color:var(--goud)}
.ap-lijst--strak{max-width:none}

/* Lijst van wat er niet gebouwd wordt. Het streepje is decoratie, geen tekst,
   dus het staat in CSS en niet in de HTML. */
.ap-nietlijst{list-style:none;margin:.75rem 0 0;padding:0;color:var(--deeg-zacht)}
.ap-nietlijst li{position:relative;padding-left:1.5rem;margin:.5rem 0}
.ap-nietlijst li::before{
  content:"";position:absolute;left:0;top:.7em;
  width:.75rem;height:2px;background:var(--goud);
}

/* Kader met de samenvatting van een blok. */
.ap-kort{
  margin-top:2rem;max-width:62ch;
  background:var(--grond-op);
  border:1px solid var(--lijn);border-left:3px solid var(--goud);
  border-radius:0 12px 12px 0;
  padding:1rem 1.25rem;
}
.ap-kortlabel{
  display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--goud);margin-bottom:.35rem;
}
.ap-kort p{margin:0;color:var(--deeg);max-width:none}

/* Uitgelicht voorbeeld binnen een blok. */
.ap-voorbeeld{
  margin:1.5rem 0;max-width:62ch;
  background:var(--grond-op);border:1px solid var(--lijn);border-radius:12px;
  padding:1.125rem 1.25rem;
}
.ap-voorbeeldlabel{
  display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--goud);
}

/* Tabellen. De hoes scrollt zelf, zodat de pagina dat nooit hoeft te doen.
   Hij is met tabindex bereikbaar, anders kan iemand zonder muis niet bij de
   rechterkolom. */
.ap-tabelhoes{
  max-width:100%;overflow-x:auto;margin:1.5rem 0;
  background:var(--grond-op);border:1px solid var(--lijn);border-radius:12px;
}
.ap-tabelhoes:focus-visible{outline:2px solid var(--goud-licht);outline-offset:3px}
.ap-tabel{width:100%;min-width:34rem;border-collapse:collapse;font-size:.9375rem}
.ap-tabel th,.ap-tabel td{
  text-align:left;padding:.75rem .9375rem;vertical-align:top;
  border-bottom:1px solid var(--lijn);
}
.ap-tabel th{
  color:var(--deeg);font-weight:600;font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.ap-tabel td{color:var(--deeg-zacht)}
.ap-tabel tbody tr:last-child th,.ap-tabel tbody tr:last-child td{border-bottom:0}
.ap-getal{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--deeg)}

.ap-staal{
  display:inline-block;width:1rem;height:1rem;border-radius:3px;
  border:1px solid var(--lijn);vertical-align:-.15em;margin-right:.5rem;
}
/* De afgekeurde regel wordt met een woord gemarkeerd en niet alleen met kleur;
   de tekst zelf blijft gewoon op 9,7:1 staan. */
.ap-af td{color:var(--deeg-zacht)}
.ap-badge{
  display:inline-block;margin-right:.5rem;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--deeg);background:rgba(243,235,221,.10);
  border:1px solid var(--lijn);border-radius:999px;padding:.15rem .5rem;
}

/* Foto met bijschrift. Klein gehouden: het gaat om de tinten, niet om het beeld. */
.ap-figuur{margin:1.5rem 0;max-width:20rem}
.ap-figuur img{width:100%;height:auto;border-radius:12px;border:1px solid var(--lijn)}
.ap-figuur figcaption{
  margin-top:.75rem;font-size:.875rem;color:var(--deeg-zacht);text-wrap:pretty;
}

/* Twee mini-schetsen naast elkaar bij het blok over raster. */
.ap-rooster{display:grid;gap:1rem;margin:1.5rem 0;grid-template-columns:1fr}
@media(min-width:700px){.ap-rooster{grid-template-columns:1fr 1fr}}
.ap-mini{background:var(--grond-op);border:1px solid var(--lijn);border-radius:12px;padding:1.125rem}
.ap-minikop{
  display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--goud);margin-bottom:.875rem;
}
.ap-vakken{display:grid;gap:.5rem;margin-bottom:.875rem}
.ap-vakken--drie{grid-template-columns:repeat(3,1fr)}
.ap-vakken--twee{grid-template-columns:1.5fr 1fr}
.ap-vak{
  display:block;height:2.25rem;border-radius:6px;
  background:rgba(243,235,221,.07);border:1px solid var(--lijn);
}
.ap-vak--hoog{height:5rem}
.ap-mini p{margin:0;max-width:none}

/* De zeven toestanden. */
.ap-toestanden{
  display:grid;gap:1rem;margin:1.75rem 0;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.ap-toestand{
  background:var(--grond-op);border:1px solid var(--lijn);border-radius:12px;
  padding:1.125rem 1.25rem;
}
.ap-tel{font-family:var(--kop);font-size:.8125rem;color:var(--goud);letter-spacing:.2em}
.ap-toestand h3{margin:.25rem 0 .5rem;font-size:1.125rem}
.ap-toestand p{margin:0;font-size:.9375rem;max-width:none}

/* Knoppen. Donkere letters op het goud: dat is 7,4:1. Wit op dit goud zou
   ruim onder de grens zakken, vandaar. */
.ap-knoprij{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.875rem}
.ap-knopvak{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.ap-knoplabel{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--deeg-zacht)}
.ap-knop{
  font:600 .9375rem/1 var(--tekst);
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.125rem;border-radius:10px;
  border:1px solid transparent;background:var(--goud);color:var(--grond);
  cursor:pointer;transition:background-color .2s ease;
}
.ap-knop:hover{background:var(--goud-licht)}
.ap-knop:focus-visible{outline:2px solid var(--goud-licht);outline-offset:3px}
.ap-knop[aria-disabled="true"]{cursor:progress}
.ap-knop[disabled]{background:#3A342C;color:#ADA398;cursor:not-allowed}
.ap-knop[disabled]:hover{background:#3A342C}
.ap-punt{
  width:.5rem;height:.5rem;border-radius:50%;background:var(--grond);
  animation:ap-puls 1.2s ease-in-out infinite;
}
@keyframes ap-puls{0%,100%{opacity:1}50%{opacity:.35}}

/* Twee kaarten naast elkaar bij het laatste blok. */
.ap-twee{display:grid;gap:1.25rem;margin:1.5rem 0;grid-template-columns:1fr}
@media(min-width:820px){.ap-twee{grid-template-columns:1fr 1fr}}
.ap-kaart{
  background:var(--grond-op);border:1px solid var(--lijn);border-radius:14px;
  padding:1.25rem 1.375rem;
}
.ap-kaart h3{margin:0 0 .75rem;font-size:1.25rem}
.ap-kaart .ap-lijst{margin-bottom:0}

/* Zonder muis, of op een aanraakscherm, is er geen hover-stand nodig. */
@media (hover:none){
  .ap-wegwijzer a:hover{border-color:var(--lijn);color:var(--deeg)}
  .ap-knop:hover{background:var(--goud)}
}

/* Vraagt het besturingssysteem om minder beweging, dan staat alles stil.
   Het puntje in de knop blijft zichtbaar, het pulseert alleen niet meer. */
@media(prefers-reduced-motion:reduce){
  .ap-punt{animation:none;opacity:1}
  .ap-wegwijzer a,.ap-knop{transition:none}
}