Enhance Cross-Device support and documentation for Passkey Registration

Update the CROSS_DEVICE_PROBLEM_ZUSAMMENFASSUNG.md to clarify the role of tunnel servers in the Cross-Device authentication process and outline troubleshooting steps. Additionally, enhance the registrieren.vue component with detailed information about the FIDO Cross-Device flow, including QR-Code format, connection requirements, and potential issues. Improve the register-passkey-options API documentation to reflect the use of tunnel servers, ensuring better understanding and support for Cross-Device functionality.

pages/registrieren.vue

@@ -187,16 +187,60 @@
               <div><strong>Origin:</strong> <code class="bg-blue-100 px-1 rounded">{{ typeof window !== 'undefined' ? window.location.origin : 'N/A (SSR)' }}</code></div>
             </div>
             
+            <!-- FIDO QR-Code Info -->
+            <div class="mt-3 p-3 bg-purple-50 border border-purple-300 rounded">
+              <div class="font-semibold text-purple-900 mb-2">🔐 FIDO Cross-Device Info:</div>
+              <div class="text-xs text-purple-800 space-y-2">
+                <div><strong>QR-Code-Format:</strong> FIDO-URI (enthält öffentlichen Schlüssel + Secret)</div>
+                <div><strong>Hinweis:</strong> Der QR-Code enthält einen FIDO-URI, der vom Smartphone gescannt werden muss.</div>
+                
+                <div class="mt-2 p-2 bg-purple-100 rounded">
+                  <strong class="text-purple-900">Wie funktioniert Cross-Device?</strong>
+                  <ol class="list-decimal list-inside mt-1 space-y-1 text-purple-700">
+                    <li>Desktop-Browser generiert QR-Code mit öffentlichem Schlüssel (FIDO-URI)</li>
+                    <li>Desktop-Browser registriert sich beim <strong>Tunnel-Server</strong> (z.B. cable.ua5v.com)</li>
+                    <li>Smartphone scannt QR-Code</li>
+                    <li>Smartphone verbindet sich über <strong>Tunnel-Server</strong> mit Desktop-Browser</li>
+                    <li>Desktop-Browser leitet Credential-Response an den Server weiter</li>
+                  </ol>
+                  <div class="mt-2 text-xs text-purple-600">
+                    <strong>Hinweis:</strong> Die Verbindung läuft über den Tunnel-Server, nicht direkt zwischen den Geräten.
+                    Bluetooth wird optional für physische Nähe-Bestätigung verwendet (abhängig vom Browser/Gerät).
+                  </div>
+                </div>
+                
+                <div class="mt-2 p-2 bg-yellow-50 border border-yellow-300 rounded">
+                  <strong class="text-yellow-900">Voraussetzungen:</strong>
+                  <ul class="list-disc list-inside mt-1 space-y-1 text-yellow-800">
+                    <li>✅ Beide Geräte müssen <strong>Internetverbindung</strong> haben</li>
+                    <li>✅ Tunnel-Server müssen erreichbar sein (cable.ua5v.com, cable.auth.com)</li>
+                    <li>⚠️ Bluetooth kann für physische Nähe-Bestätigung verwendet werden (abhängig vom Browser/Gerät)</li>
+                    <li>⚠️ Einige Browser/Implementierungen erfordern Bluetooth für Cross-Device</li>
+                  </ul>
+                </div>
+                
+                <div class="mt-2 text-purple-700">
+                  <strong>Problem:</strong> Wenn das Smartphone den QR-Code scannt, aber keine Verbindung herstellt:
+                  <ul class="list-disc list-inside mt-1 space-y-1">
+                    <li>Prüfen Sie, ob beide Geräte Internetverbindung haben</li>
+                    <li>Prüfen Sie, ob Tunnel-Server erreichbar sind (Firewall/Netzwerk: cable.ua5v.com, cable.auth.com)</li>
+                    <li>Prüfen Sie, ob Bluetooth aktiviert ist (kann je nach Browser/Gerät erforderlich sein)</li>
+                    <li>Versuchen Sie die alternative Smartphone-URL unten (umgeht Tunnel-Server)</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            
             <!-- Smartphone URL -->
             <div v-if="debugSmartphoneUrl" class="mt-3 p-3 bg-green-50 border border-green-300 rounded">
-              <div class="font-semibold text-green-900 mb-2">📱 Smartphone-URL (statt QR-Code scannen):</div>
+              <div class="font-semibold text-green-900 mb-2">📱 Alternative: Smartphone-URL (manuell öffnen):</div>
               <div class="break-all text-xs mb-2 p-2 bg-white rounded border">
                 <a :href="debugSmartphoneUrl" target="_blank" class="text-blue-600 hover:underline">
                   {{ debugSmartphoneUrl }}
                 </a>
               </div>
               <div class="text-xs text-gray-700 mb-2">
-                <strong>Anleitung:</strong> Öffnen Sie diese URL auf Ihrem Smartphone, um die Passkey-Registrierung durchzuführen.
+                <strong>Anleitung:</strong> Falls der QR-Code nicht funktioniert, öffnen Sie diese URL manuell auf Ihrem Smartphone.
               </div>
               <button
                 @click="copyToClipboard(debugSmartphoneUrl)"