Mobile-Support: Smartphones für die ganze Seite

- Dashboard-Bewerbungsliste auf Handy als gestapelte Karten statt horizontal gescrolltem 760px-Raster
- Modals auf Handy scrollbar (Inhalt wurde bisher unten abgeschnitten)
- Chat: Thread-Aktionen auf Touch sichtbar, Sidebar/Chat-Höhen für mobil
- Bewerbungs-Antwort-Toolbar & Admin-Stat-Boxen umbruchfähig

Co-Authored-By: Claude <noreply@anthropic.com>

views/admin.ejs

@@ -28,7 +28,7 @@
                 </h2>
                 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Konten anlegen, Passwörter zurücksetzen, ein Konto übernehmen oder Benutzer inkl. aller Daten löschen.</p>
             </div>
-            <div class="flex gap-3">
+            <div class="flex flex-wrap gap-3">
                 <div class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-center shadow-sm dark:border-white/5 dark:bg-gray-800">
                     <div class="text-xl font-bold leading-none"><%= users.length %></div>
                     <div class="text-[11px] uppercase tracking-wide text-gray-500 dark:text-gray-400 mt-1">Benutzer</div>

views/bewerbung.ejs

@@ -500,9 +500,9 @@
                                         <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Betreff</label>
                                         <input type="text" name="subject" value="<%= /^\s*(re|aw)\s*:/i.test(e.subject || '') ? (e.subject || '') : ('Re: ' + (e.subject || '')) %>"
                                             class="reply-subject w-full px-3 py-2 mb-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white text-sm">
-                                        <div class="flex items-center justify-between mb-1">
+                                        <div class="flex flex-wrap items-center justify-between gap-2 mb-1">
                                             <label class="block text-xs font-medium text-gray-500 dark:text-gray-400">Nachricht</label>
-                                            <div class="flex items-center gap-2">
+                                            <div class="flex flex-wrap items-center gap-2">
                                                 <select class="ai-reply-typ text-xs px-1.5 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200">
                                                     <option value="antwort">Antwort</option>
                                                     <option value="absage">Absage (andere Stelle)</option>

views/chat.ejs

@@ -21,6 +21,12 @@
         @media (prefers-reduced-motion: reduce) {
             .typing-dot { animation: none; opacity: 0.6; }
         }
+        /* Thread rename/delete rely on hover/focus to appear — neither exists on a
+           touchscreen, so the controls would be unreachable. Show them on small
+           (likely touch) screens. */
+        @media (max-width: 768px) {
+            .threadRename, .threadDelete { opacity: 1 !important; }
+        }
         /* Markdown rendering inside assistant bubbles */
         .chat-md { line-height: 1.5; }
         .chat-md > *:first-child { margin-top: 0; }
@@ -52,9 +58,9 @@
             </button>
         </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-[240px_1fr] gap-3 h-[calc(100vh-180px)] min-h-[360px]">
+        <div class="grid grid-cols-1 md:grid-cols-[240px_1fr] gap-3 min-h-[360px] md:h-[calc(100vh-180px)]">
             <!-- Thread sidebar -->
-            <aside class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 overflow-hidden flex flex-col">
+            <aside class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 overflow-hidden flex flex-col max-h-48 md:max-h-none">
                 <div class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">Verläufe</div>
                 <ul id="threadList" class="overflow-y-auto flex-1 divide-y divide-gray-100 dark:divide-gray-700">
                     <% threads.forEach(function(t) { %>
@@ -90,7 +96,7 @@
             </aside>
 
             <!-- Message area -->
-            <section class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 flex flex-col overflow-hidden">
+            <section class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 flex flex-col overflow-hidden h-[60vh] md:h-auto">
                 <div id="chatLog" class="flex-1 overflow-y-auto p-4 space-y-3 text-gray-800 dark:text-gray-100">
                     <% if (!messages.length) { %>
                         <div class="h-full flex items-center justify-center text-gray-400 text-sm px-6">

views/index.ejs

@@ -107,9 +107,9 @@
             }
         </style>
         <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-x-auto">
-            <div class="min-w-[760px]">
-                <!-- Column labels -->
-                <div class="app-grid px-6 py-3 bg-gray-50 dark:bg-gray-700 text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+            <div class="md:min-w-[760px]">
+                <!-- Column labels (desktop only — on phones the rows become stacked cards) -->
+                <div class="app-head app-grid px-6 py-3 bg-gray-50 dark:bg-gray-700 text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                     <span></span>
                     <span>Datum</span>
                     <span>Firma</span>