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/Home.vue

@@ -399,6 +399,18 @@ h1 {
     padding: var(--space-5);
   }
 
+  .hero-actions {
+    gap: var(--space-2);
+  }
+
+  .hero-preview {
+    padding: var(--space-4);
+  }
+
+  .preview-row {
+    padding: var(--space-4);
+  }
+
   .value-grid,
   .feature-grid,
   .workflow-grid {
@@ -409,4 +421,50 @@ h1 {
     max-width: none;
   }
 }
+
+@media (width <= 600px) {
+  .hero,
+  .feature-section,
+  .stack-section {
+    padding: var(--space-4);
+  }
+
+  h1 {
+    font-size: clamp(1.6rem, 8vw, 2rem);
+  }
+
+  .hero-lead {
+    margin-bottom: var(--space-4);
+    font-size: var(--font-size-md);
+  }
+
+  .hero-actions {
+    width: 100%;
+  }
+
+  :deep(.hero-actions .v-btn) {
+    width: 100%;
+    min-height: 44px;
+  }
+
+  .hero-tags {
+    gap: 6px;
+  }
+
+  .hero-tag {
+    padding: 4px var(--space-2);
+    font-size: var(--font-size-xs);
+  }
+
+  .value-card,
+  .workflow-card,
+  .feature-card {
+    padding: var(--space-4);
+  }
+
+  .stack-pill {
+    width: 100%;
+    text-align: center;
+  }
+}
 </style>