<main>
  <p class="eyebrow">Mikroøvelse</p>
  <h1>Skjult er ikke én tilstand</h1>

  <div class="technique-controls" aria-label="Vælg skjuleteknik">
    <button class="technique-toggle" type="button" aria-pressed="false" data-technique="opacity">
      Aktivér opacity: 0
    </button>
    <button class="technique-toggle" type="button" aria-pressed="false" data-technique="hidden">
      Aktivér hidden
    </button>
    <button class="technique-toggle" type="button" aria-pressed="false" data-technique="inert">
      Aktivér inert
    </button>
    <button class="technique-toggle" type="button" aria-pressed="false" data-technique="visually-hidden">
      Aktivér visually-hidden
    </button>
  </div>

  <div class="examples">
    <article>
      <h2><code>opacity: 0</code></h2>
      <p>Gør knappen gennemsigtig, men behold dens plads.</p>
      <button class="opacity-control" type="button">Book rejsen</button>
    </article>

    <article>
      <h2><code>hidden</code></h2>
      <p>Skjul knappen med HTML-attributten.</p>
      <button class="hidden-control" type="button">Book rejsen</button>
    </article>

    <article>
      <h2><code>inert</code></h2>
      <p>Gør det synlige område midlertidigt inaktivt.</p>
      <div class="inert-area">
        <button class="inert-control" type="button">Book rejsen</button>
      </div>
    </article>

    <article>
      <h2><code>.visually-hidden</code></h2>
      <p>Skjul den supplerende tekst uden at fjerne den fra træet.</p>
      <p class="visually-hidden-copy">Prisen er eksklusive lokal turistskat.</p>
    </article>
  </div>
</main>