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

@@ -62,17 +62,17 @@ const techStack = ['Vue 3', 'ASP.NET Core', 'PostgreSQL', 'MinIO', 'md-editor-v3
 </script>
 
 <template>
-  <v-container fluid class="landing-page">
-    <section class="hero hoard-panel">
+  <v-container fluid class="landing-page hoard-page">
+    <section class="hero hoard-panel hoard-panel-gradient">
       <div class="hero-copy">
-        <p class="hero-kicker">Self-hosted Datei-Workspace</p>
+        <p class="hero-kicker hoard-kicker">Self-hosted Datei-Workspace</p>
         <h1>Hoard ist deine ruhige Startseite für Dateien, Ordner und Markdown.</h1>
         <p class="hero-lead">
           Eine einfache, Google-Drive-inspirierte Web-App für Teams, die volle Kontrolle über
           Daten, Struktur und Workflow behalten wollen.
         </p>
 
-        <div class="hero-actions">
+        <div class="hero-actions hoard-action-row">
           <v-btn color="primary" size="large" prepend-icon="mdi-login" to="/login">
             Zum Login
           </v-btn>
@@ -129,7 +129,7 @@ const techStack = ['Vue 3', 'ASP.NET Core', 'PostgreSQL', 'MinIO', 'md-editor-v3
 
     <section class="feature-section hoard-panel">
       <header class="section-head">
-        <p class="section-kicker">Für den Produktivalltag</p>
+        <p class="section-kicker hoard-kicker">Für den Produktivalltag</p>
         <h2>Weniger Tool-Chaos, mehr Fokus auf Inhalte</h2>
       </header>
       <div class="feature-grid">
@@ -143,7 +143,7 @@ const techStack = ['Vue 3', 'ASP.NET Core', 'PostgreSQL', 'MinIO', 'md-editor-v3
 
     <section class="workflow-section">
       <header class="section-head">
-        <p class="section-kicker">So funktioniert Hoard</p>
+        <p class="section-kicker hoard-kicker">So funktioniert Hoard</p>
         <h2>In drei klaren Schritten produktiv starten</h2>
       </header>
       <div class="workflow-grid">
@@ -157,7 +157,7 @@ const techStack = ['Vue 3', 'ASP.NET Core', 'PostgreSQL', 'MinIO', 'md-editor-v3
 
     <section class="stack-section hoard-panel">
       <div class="stack-copy">
-        <p class="section-kicker">Technische Basis</p>
+        <p class="section-kicker hoard-kicker">Technische Basis</p>
         <h2>Schlank gebaut für ein realistisches MVP</h2>
         <p class="stack-text">
           Hoard kombiniert einen modernen Frontend-Stack mit einem pragmatischen Backend-Setup,
@@ -173,29 +173,21 @@ const techStack = ['Vue 3', 'ASP.NET Core', 'PostgreSQL', 'MinIO', 'md-editor-v3
 
 <style scoped>
 .landing-page {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-6);
-  margin-inline: auto;
-  width: min(100%, 1180px);
-  padding-block: var(--space-4) var(--space-8);
+  --hoard-page-width: 1180px;
 }
 
 .hero {
+  --hoard-gradient-angle: 120deg;
+  --hoard-gradient-start: color-mix(in srgb, var(--color-primary-100) 34%, var(--color-surface) 66%);
+  --hoard-gradient-end: var(--color-surface);
+  --hoard-gradient-end-stop: 52%;
+
   display: grid;
   grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
   gap: var(--space-6);
   padding: var(--space-8);
-  background:
-    linear-gradient(
-      120deg,
-      color-mix(in srgb, var(--color-primary-100) 34%, var(--color-surface) 66%) 0%,
-      var(--color-surface) 52%
-    );
 }
 
-.hero-kicker,
-.section-kicker,
 .workflow-number,
 .preview-title,
 .row-title,
@@ -204,16 +196,6 @@ const techStack = ['Vue 3', 'ASP.NET Core', 'PostgreSQL', 'MinIO', 'md-editor-v3
   margin: 0;
 }
 
-.hero-kicker,
-.section-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-4);
   max-width: 20ch;
@@ -229,9 +211,6 @@ h1 {
 }
 
 .hero-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-3);
   margin-bottom: var(--space-4);
 }
 
@@ -414,11 +393,6 @@ h1 {
 }
 
 @media (width <= 960px) {
-  .landing-page {
-    gap: var(--space-5);
-    padding-block: var(--space-2) var(--space-6);
-  }
-
   .hero,
   .feature-section,
   .stack-section {