/* site/schakelaar.css — de formaatschakelaar op voorbeelden.html (WP-002-03 WT-03b).
   Eén gepinde scroll-scène: een schematische site groeit van Online naar Groei naar
   Marktleider. Wat verandert zijn de feiten van ladder A: pagina's (3/6/10), SEO-niveau en
   wijzigingsminuten. huisstijl/js/beweging.js zet .aan op de [data-stap]-treden.
   Zonder JS, zonder :has() of met minder beweging: de eindtoestand (alles zichtbaar).
   Alleen tokens uit huisstijl/tokens.css. */

.schakelaar { position: relative; padding: var(--ruimte-7) 0; }
.schakelaar__scene { display: grid; gap: var(--ruimte-5); }

.schakelaar__treden {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--ruimte-3);
}
.schakelaar__treden li {
  font-family: var(--letter-display);
  font-weight: var(--gewicht-halfvet);
  padding: var(--ruimte-1) var(--ruimte-4);
  border: 1px solid var(--kleur-rand-sterk);
  border-radius: var(--radius-rond);
  color: var(--kleur-inkt);
}

/* De schematische site: een venster met tabbladen (pagina's) en een paar vlakken. */
.mock {
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-l);
  background-color: var(--kleur-vlak-1);
  padding: var(--ruimte-4);
  display: grid; gap: var(--ruimte-4);
}
.mock__tabs { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
.mock__tab {
  display: block; width: 3.25rem; height: 0.75rem;
  border-radius: var(--radius-rond);
  background-color: var(--kleur-vlak-3);
}
.mock__blok { display: block; height: 3rem; border-radius: var(--radius-l); background-color: var(--kleur-vlak-3); }
.mock__rij { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
.mock__label {
  font-size: var(--tekst-s);
  padding: var(--ruimte-1) var(--ruimte-3);
  border-radius: var(--radius-rond);
  background-color: var(--kleur-vlak-2);
  color: var(--kleur-inkt);
}

/* Met JS en :has(): de scène pint en groeit trede voor trede mee met het scrollen. */
@supports selector(:has(a)) {
  .js .schakelaar { min-height: 260vh; }
  .js .schakelaar__scene { position: sticky; top: 7rem; }
  /* Op smalle schermen is de navigatiebalk hoger (de links lopen over twee regels). */
  @media (max-width: 42rem) { .js .schakelaar__scene { top: 12rem; } }

  .js .schakelaar .t-groei,
  .js .schakelaar .t-markt { opacity: 0.12; }
  /* Nog niet bereikte treden: gedempte inkt (≥ 4,5:1 op elk vlak, tokens.css), geen opacity (keuring #15). */
  .js .schakelaar__treden li { color: var(--kleur-inkt-gedempt); border-color: var(--kleur-rand); }
  .js .schakelaar__treden li.aan { color: var(--kleur-inkt); border-color: var(--kleur-accent); }

  .js .schakelaar:has(.schakelaar__treden li:nth-child(2).aan) .t-groei,
  .js .schakelaar:has(.schakelaar__treden li:nth-child(3).aan) .t-markt { opacity: 1; }

  /* Alleen de labels van de huidige trede: */
  .js .schakelaar .l-groei, .js .schakelaar .l-markt { display: none; }
  .js .schakelaar:has(.schakelaar__treden li:nth-child(2).aan) .l-online { display: none; }
  .js .schakelaar:has(.schakelaar__treden li:nth-child(2).aan) .l-groei { display: inline; }
  .js .schakelaar:has(.schakelaar__treden li:nth-child(3).aan) .l-groei { display: none; }
  .js .schakelaar:has(.schakelaar__treden li:nth-child(3).aan) .l-markt { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .js .schakelaar { min-height: 0; }
  .js .schakelaar__scene { position: static; }
  .js .schakelaar .t-groei, .js .schakelaar .t-markt { opacity: 1; }
  .js .schakelaar__treden li { color: var(--kleur-inkt); }
}