@php
    $h = 'font-display text-base font-semibold text-ink';
    $p = 'text-sm leading-relaxed text-ink-2';
    $li = 'text-sm leading-relaxed text-ink-2';
    $code = 'rounded bg-inset px-1.5 py-0.5 font-mono text-[12px] text-accent-text';
@endphp

<div class="space-y-3">
    <h3 class="{{ $h }}">Zwei-Faktor-Authentifizierung</h3>
    <p class="{{ $p }}">2FA ist optional, aber empfohlen. Du kannst unter <span class="text-ink">Einstellungen → Sicherheit</span> einrichten:</p>
    <ul class="ml-4 list-disc space-y-1.5">
        <li class="{{ $li }}"><span class="text-ink">TOTP</span> (Authenticator-App, z. B. „Google Authenticator") — ein zeitbasierter 6-stelliger Code.</li>
        <li class="{{ $li }}"><span class="text-ink">Security-Key</span> (Hardware, z. B. YubiKey) — einstecken und einmal tippen.</li>
        <li class="{{ $li }}"><span class="text-ink">Backup-Codes</span> — einmalige Codes als Notfall-Zugang.</li>
    </ul>
</div>

<div class="space-y-3">
    <h3 class="{{ $h }}">Wichtig: Zugangswege &amp; welcher Faktor wo funktioniert</h3>
    <p class="{{ $p }}">Ein <span class="text-ink">Security-Key (YubiKey) funktioniert nur über die HTTPS-Domain</span> — WebAuthn braucht einen sicheren Kontext und die Domain als Kennung (rpId). Über die Domain wird die Security-Key-Anmeldung angeboten und funktioniert.</p>
    <p class="{{ $p }}">Über den <span class="text-ink">Bare-IP-/HTTP-Recovery-Weg</span> (<code class="{{ $code }}">http://&lt;Server-IP&gt;</code>) lässt sich <span class="text-ink">nicht</span> per Security-Key anmelden. Dort musst du einen <span class="text-ink">Backup-Code</span> verwenden.</p>
    <p class="{{ $p }}"><span class="text-ink">TOTP funktioniert überall</span> — auch über Bare-IP/HTTP. Wer TOTP nutzt, braucht für den Bare-IP-Weg <span class="text-ink">keinen</span> Backup-Code.</p>
    <ul class="ml-4 list-disc space-y-1.5">
        <li class="{{ $li }}">Nutzt du <span class="text-ink">nur</span> einen Security-Key: bewahre die <span class="text-ink">Backup-Codes</span> auf — sie sind dein einziger Weg über den Bare-IP-Recovery-Pfad.</li>
        <li class="{{ $li }}">Nutzt du (auch) TOTP: du bist auf allen Wegen abgedeckt, ohne Backup-Codes nötig zu haben.</li>
    </ul>
</div>

<div class="space-y-3">
    <h3 class="{{ $h }}">Passwort-Manager-Erweiterungen (Bitwarden, Kaspersky …)</h3>
    <p class="{{ $p }}">Browser-Erweiterungen können die Security-Key-Registrierung abfangen und stattdessen „Passkey speichern" anbieten. Clusev fordert korrekt einen Hardware-Schlüssel an (cross-platform, nicht-auffindbar, mit dem Hinweis <code class="{{ $code }}">security-key</code>), aber eine Webseite kann Erweiterungen nicht abschalten.</p>
    <p class="{{ $p }}">Lösung: in der Erweiterung die Passkey-Übernahme für diese Seite deaktivieren (z. B. Bitwarden → „Nach Passkeys fragen" aus), oder den Schlüssel in einem Browser/Fenster <span class="text-ink">ohne</span> diese Erweiterung registrieren (z. B. ein privates Fenster). Der Login mit dem Schlüssel funktioniert danach auch mit aktiver Erweiterung.</p>
</div>