<div class="onb-grid">

  <a class="onb-card" data-mod="login" href="/books/onboarding/page/01-erster-login">
    <div class="onb-num"><span class="id">01</span><span class="sep">/</span><span class="cat">Erster Tag</span></div>
    <div class="onb-emoji">🔑</div>
    <div class="onb-title">Erster Login &amp; Passwort ändern</div>
    <p class="onb-desc">Wie du dich zum ersten Mal anmeldest und dein persönliches Passwort vergibst.</p>
    <div class="onb-footer">
      <div class="onb-tags">
        <span class="onb-tag">Konto</span><span class="onb-tag">Passwort</span>
      </div>
      <span class="onb-arrow">↗</span>
    </div>
  </a>

  <a class="onb-card" data-mod="yubikey" href="/books/onboarding/page/02-yubikey-registrieren">
    <div class="onb-num"><span class="id">02</span><span class="sep">/</span><span class="cat">Sicherheit</span></div>
    <div class="onb-emoji">🔐</div>
    <div class="onb-title">YubiKey registrieren</div>
    <p class="onb-desc">Wie du deinen physischen Sicherheitsschlüssel als zweiten Authentifizierungsfaktor einrichtest.</p>
    <div class="onb-footer">
      <div class="onb-tags">
        <span class="onb-tag">2FA</span><span class="onb-tag">YubiKey</span>
      </div>
      <span class="onb-arrow">↗</span>
    </div>
  </a>

  <a class="onb-card" data-mod="vpn" href="/books/onboarding/page/03-vpn-einrichten">
    <div class="onb-num"><span class="id">03</span><span class="sep">/</span><span class="cat">Fernzugriff</span></div>
    <div class="onb-emoji">🌐</div>
    <div class="onb-title">VPN-Verbindung einrichten</div>
    <p class="onb-desc">Wie du von außerhalb des Büros sicher auf die internen Systeme zugreifst.</p>
    <div class="onb-footer">
      <div class="onb-tags">
        <span class="onb-tag">VPN</span><span class="onb-tag">Homeoffice</span>
      </div>
      <span class="onb-arrow">↗</span>
    </div>
  </a>

</div>