Improve mobile responsiveness and touch targets

Add comprehensive mobile-first adjustments across the UI: reorganize topbar actions and context in Layout.vue, make the navigation drawer mobile-friendly (new mobile class, bottom location, density and block-button behavior), and add many responsive CSS rules. Introduce safe-area variables and larger touch targets in global.css (44px buttons, icon sizes, nav item heights), plus additional responsive patterns in page-layouts.css and surface-patterns.css. Apply mobile breakpoints and spacing/stacking tweaks to Home, Login, Impressum and 404 pages to ensure CTAs, cards and forms behave well on <=960px and <=600px viewports. Document the responsive implementation standard in GUI/style.md and update codexInfo.md to note the mobile/usability changes. Changes are scoped to mobile breakpoints to avoid desktop regressions.

GUI/src/routes/authentication/Login.vue

@@ -140,5 +140,52 @@ h1 {
   .login-shell {
     grid-template-columns: 1fr;
   }
+
+  .login-form {
+    padding: var(--space-5);
+  }
+
+  .form-meta {
+    flex-wrap: wrap;
+  }
+}
+
+@media (width <= 600px) {
+  h1 {
+    max-width: none;
+    font-size: clamp(1.55rem, 7vw, 1.95rem);
+  }
+
+  .login-intro {
+    margin-bottom: var(--space-4);
+  }
+
+  .login-points {
+    gap: var(--space-2);
+  }
+
+  .login-points li {
+    align-items: flex-start;
+  }
+
+  .login-form {
+    gap: var(--space-3);
+    padding: var(--space-4);
+  }
+
+  .form-meta {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-2);
+  }
+
+  :deep(.form-meta .v-btn) {
+    width: 100%;
+    min-height: 44px;
+  }
+
+  :deep(.login-form .v-btn) {
+    min-height: 44px;
+  }
 }
 </style>