feat(auth): add login and registration modal functionality

frontend/src/app/feature/landing/landing.component.html

@@ -1,4 +1,4 @@
-<div class="min-h-screen bg-deep-blue text-text-primary">
+<div class="min-h-screen bg-deep-blue text-text-primary relative">
   <div class="container mx-auto px-4 py-8 sm:py-12">
     <div class="max-w-5xl mx-auto">
       <div class="text-center mb-12 sm:mb-16">
@@ -17,18 +17,18 @@
               Spiele
             </a>
           } @else {
-            <a
-              routerLink="/register"
+            <button
+              (click)="showRegisterForm()"
               class="w-full sm:w-auto button-primary px-6 sm:px-8 py-3 shadow-lg"
             >
               Konto erstellen
-            </a>
-            <a
-              routerLink="/login"
+            </button>
+            <button
+              (click)="showLoginForm()"
               class="w-full sm:w-auto bg-slate-700 text-white hover:bg-slate-600 px-6 sm:px-8 py-3 shadow-lg rounded"
             >
               Anmelden
-            </a>
+            </button>
           }
         </div>
       </div>
@@ -120,8 +120,8 @@
               xmlns="http://www.w3.org/2000/svg"
               class="h-6 w-6"
               fill="none"
-              viewBox="0 0 24 24"
               stroke="currentColor"
+              viewBox="0 0 24 24"
             >
               <path
                 stroke-linecap="round"
@@ -136,8 +136,8 @@
               xmlns="http://www.w3.org/2000/svg"
               class="h-6 w-6"
               fill="none"
-              viewBox="0 0 24 24"
               stroke="currentColor"
+              viewBox="0 0 24 24"
             >
               <path
                 stroke-linecap="round"
@@ -181,4 +181,39 @@
       </div>
     </div>
   </div>
+
+  <!-- Auth Forms Overlay -->
+  @if (showLogin() || showRegister()) {
+    <div 
+      class="fixed inset-0 bg-black/50 z-40" 
+      (click)="hideAuthForms()"
+      (keydown.enter)="hideAuthForms()"
+      tabindex="0"
+      role="dialog"
+      aria-modal="true"
+    ></div>
+    <div 
+      class="fixed inset-0 flex items-center justify-center z-50 p-4"
+      role="presentation"
+    >
+      <div 
+        class="relative"
+        role="dialog"
+        aria-modal="true"
+      >
+        @if (showLogin()) {
+          <app-login 
+            (switchForm)="showRegisterForm()"
+            (closeDialog)="hideAuthForms()"
+          ></app-login>
+        }
+        @if (showRegister()) {
+          <app-register 
+            (switchForm)="showLoginForm()"
+            (closeDialog)="hideAuthForms()"
+          ></app-register>
+        }
+      </div>
+    </div>
+  }
 </div>