Add global page and surface CSS patterns

Introduce reusable global CSS modules and apply them across routes to centralize layout/surface patterns. Added GUI/src/styles/global/page-layouts.css and GUI/src/styles/global/surface-patterns.css and imported both in GUI/src/main.ts. Updated Layout.vue, Home.vue, 404NotFound.vue, Impressum.vue and authentication/Login.vue to use hoard-* utility classes (hoard-page, hoard-shell-grid, hoard-kicker, hoard-action-row, hoard-panel-gradient, etc.) and removed duplicated scoped styles. Also updated codexInfo.md to document the new CSS modules and provide usage guidance. This reduces per-page CSS duplication and standardizes gradients, spacing and page-shell behavior.

GUI/src/routes/Impressum.vue

@@ -38,10 +38,10 @@ const legalNotes = [
 </script>
 
 <template>
-  <v-container fluid class="impressum-page">
-    <section class="impressum-hero hoard-panel">
+  <v-container fluid class="impressum-page hoard-page">
+    <section class="impressum-hero hoard-panel hoard-panel-gradient">
       <div class="hero-copy">
-        <p class="hero-kicker">Rechtliche Angaben</p>
+        <p class="hero-kicker hoard-kicker">Rechtliche Angaben</p>
         <h1>Impressum</h1>
         <p class="hero-lead">
           Diese Seite ist im Hoard-Design aufgebaut und mit Testdaten gefüllt. Ersetze die Angaben
@@ -54,7 +54,7 @@ const legalNotes = [
         </div>
       </div>
 
-      <div class="hero-actions">
+      <div class="hero-actions hoard-action-row">
         <v-btn color="primary" prepend-icon="mdi-home" to="/">Zur Startseite</v-btn>
         <v-btn variant="outlined" prepend-icon="mdi-login" to="/login">Zum Login</v-btn>
       </div>
@@ -96,7 +96,7 @@ const legalNotes = [
 
     <section class="notes-section hoard-panel">
       <header class="notes-head">
-        <p class="notes-kicker">Rechtliche Hinweise</p>
+        <p class="notes-kicker hoard-kicker">Rechtliche Hinweise</p>
         <h2>Wichtige Zusatzinformationen</h2>
       </header>
 
@@ -112,45 +112,27 @@ const legalNotes = [
 
 <style scoped>
 .impressum-page {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-6);
-  margin-inline: auto;
-  width: min(100%, 1120px);
-  padding-block: var(--space-4) var(--space-8);
+  --hoard-page-width: 1120px;
 }
 
 .impressum-hero {
+  --hoard-gradient-angle: 125deg;
+  --hoard-gradient-start: color-mix(in srgb, var(--color-primary-100) 40%, var(--color-surface) 60%);
+  --hoard-gradient-end: var(--color-surface);
+  --hoard-gradient-end-stop: 56%;
+
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: var(--space-6);
   align-items: end;
   padding: var(--space-8);
-  background:
-    linear-gradient(
-      125deg,
-      color-mix(in srgb, var(--color-primary-100) 40%, var(--color-surface) 60%) 0%,
-      var(--color-surface) 56%
-    );
 }
 
-.hero-kicker,
 .hero-lead,
-.meta-text,
-.notes-kicker {
+.meta-text {
   margin: 0;
 }
 
-.hero-kicker,
-.notes-kicker {
-  margin-bottom: var(--space-2);
-  color: var(--color-primary-700);
-  font-size: var(--font-size-sm);
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-
 h1 {
   margin-bottom: var(--space-3);
   font-size: clamp(1.9rem, 2.2vw + 1rem, 2.5rem);
@@ -187,10 +169,7 @@ h1 {
 }
 
 .hero-actions {
-  display: flex;
-  flex-wrap: wrap;
   justify-content: flex-end;
-  gap: var(--space-3);
 }
 
 .details-grid {
@@ -278,11 +257,6 @@ h3 {
 }
 
 @media (width <= 960px) {
-  .impressum-page {
-    gap: var(--space-5);
-    padding-block: var(--space-2) var(--space-6);
-  }
-
   .impressum-hero,
   .notes-section {
     padding: var(--space-5);