UI refresh: animation, cards, responsive tweaks

Large frontend modernization: add route fade transition and hoard-soft-enter keyframes with prefers-reduced-motion support; introduce smoother motion tokens and stronger shadow tokens. Update global CSS to use subtle surface gradients, unified transitions, hover lift effects, focus rings and improved button/card/table/overlay styles. Wrap <router-view> in a transition and adjust brand/logo sizing and interactions. Revamp several pages/components (Home, Login, Impressum, 404, Forbidden) with adjusted typography, animated entry for sections and improved card hover states. Admin/Dashboard pages enhanced: AdminUsers gains stats, mobile card list & computed counts; AdminUserDetail and Dashboard show compact summary cards and updated styles. Documentation updated (style.md, codexInfo.md) to reflect the new modernisation rules. No API or backend changes.

GUI/src/Layout.vue

@@ -428,7 +428,11 @@ watch(
 
     <v-main class="hoard-main">
       <div class="main-shell">
-        <router-view />
+        <router-view v-slot="{ Component }">
+          <transition name="route-fade" mode="out-in">
+            <component :is="Component" />
+          </transition>
+        </router-view>
       </div>
 
       <v-footer
@@ -492,17 +496,29 @@ watch(
   color: inherit;
   background: transparent;
   cursor: pointer;
+  border-radius: var(--radius-md);
+  transition:
+    color var(--transition-fast),
+    transform var(--transition-fast);
 }
 
 .brand-mark {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: 54px;
+  height: 54px;
+  transition:
+    transform var(--transition-fast);
+}
+
+.brand-button:hover .brand-mark {
+  transform: translateY(-1px);
 }
 
 .brand-logo {
-  width: 46px;
-  height: 46px;
+  width: 58px;
+  height: 58px;
   object-fit: contain;
 }
 
@@ -603,7 +619,7 @@ watch(
 
 .drawer-top {
   padding: var(--space-2) var(--space-4) var(--space-4);
-  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 85%, white 15%);
+  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 85%, var(--color-surface) 15%);
 }
 
 .drawer-title {
@@ -619,7 +635,7 @@ watch(
 
 .drawer-bottom {
   padding: var(--space-3) var(--space-2) var(--space-4);
-  border-top: 1px solid color-mix(in srgb, var(--color-border) 90%, white 10%);
+  border-top: 1px solid color-mix(in srgb, var(--color-border) 90%, var(--color-surface) 10%);
 }
 
 .drawer-section-head {
@@ -645,6 +661,23 @@ watch(
   padding: var(--space-6);
 }
 
+.route-fade-enter-active,
+.route-fade-leave-active {
+  transition:
+    opacity var(--transition-medium),
+    transform var(--transition-medium);
+}
+
+.route-fade-enter-from {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+.route-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
 .hoard-footer {
   flex: 0 0 auto;
   height: auto !important;
@@ -755,8 +788,13 @@ watch(
   }
 
   .brand-logo {
-    width: 40px;
-    height: 40px;
+    width: 48px;
+    height: 48px;
+  }
+
+  .brand-mark {
+    width: 46px;
+    height: 46px;
   }
 
   .brand-title {