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

@@ -269,11 +269,48 @@ h3 {
 
   .hero-actions {
     justify-content: flex-start;
+    gap: var(--space-2);
   }
 
   .details-grid,
   .notes-grid {
     grid-template-columns: 1fr;
   }
+
+  :deep(.hero-actions .v-btn) {
+    min-height: 44px;
+  }
+}
+
+@media (width <= 600px) {
+  .impressum-hero,
+  .notes-section {
+    padding: var(--space-4);
+  }
+
+  h1 {
+    font-size: clamp(1.55rem, 7vw, 1.95rem);
+  }
+
+  .hero-meta {
+    margin-top: var(--space-4);
+    gap: var(--space-2);
+  }
+
+  .hero-actions {
+    width: 100%;
+  }
+
+  :deep(.hero-actions .v-btn) {
+    width: 100%;
+  }
+
+  .detail-card {
+    padding: var(--space-4);
+  }
+
+  .note-card {
+    padding: var(--space-3);
+  }
 }
 </style>