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.

codexInfo.md

@@ -61,6 +61,8 @@ Ich baue alleine neben meiner Ausbildung eine einfache self-hosted Web-App für
 ## Angelegte globale CSS-Basis
 - Statt `app.css` wurde eine zentrale globale Datei `GUI/src/global.css` angelegt und verwendet.
 - Diese Datei wird in `GUI/src/main.ts` über `import './global.css'` eingebunden.
+- Zusätzlich wurden modulare globale CSS-Dateien angelegt: `GUI/src/styles/global/page-layouts.css` und `GUI/src/styles/global/surface-patterns.css`.
+- Beide Module werden ebenfalls zentral in `GUI/src/main.ts` eingebunden und bündeln wiederkehrende Layout-/Surface-Patterns.
 - Inhaltlich stellt `global.css` bereit:
   - Design-Tokens als CSS-Variablen (`:root`) für Farben, Spacing, Radius, Schatten, Typografie und Statusfarben.
   - Globale Basisstile für `html`, `body`, Links, Überschriften, Fokuszustände und Scrollbars.
@@ -68,33 +70,28 @@ Ich baue alleine neben meiner Ausbildung eine einfache self-hosted Web-App für
   - Wiederverwendbare Utility-/Pattern-Klassen für Hoard-Seiten, z. B. `hoard-panel`, `hoard-toolbar`, `hoard-list-row`, `hoard-empty-state`, `hoard-status`.
   - Responsive Verhalten für kleinere Viewports per Media Query.
 
+## Anleitung: CSS-Patterns verwenden
+- Neue Seiten standardmäßig mit `hoard-page` aufbauen; für zentrierte Vollhöhen-Ansichten zusätzlich `hoard-page--centered`.
+- Karten-/Shell-Container als `hoard-shell-grid hoard-panel` verwenden; Breite/Abstände pro Seite über CSS-Variablen setzen (`--hoard-shell-width`, `--hoard-shell-gap`, `--hoard-shell-padding`).
+- Wiederkehrende Headlines/Kicker mit `hoard-kicker` nutzen, Varianten bei Bedarf mit `hoard-kicker--wide` oder `hoard-kicker--xs`.
+- Button-/Link-Aktionszeilen mit `hoard-action-row` bauen statt pro Seite eigene Flex-Definitionen zu duplizieren.
+- Gradient-Flächen über `hoard-panel-gradient` + Variablen steuern (`--hoard-gradient-angle`, `--hoard-gradient-start`, `--hoard-gradient-end`, `--hoard-gradient-end-stop`), nicht pro Seite komplett neu definieren.
+- Lokales `scoped` CSS nur für wirklich seitenspezifische Styles verwenden; alles Wiederverwendbare zuerst in `GUI/src/styles/global/page-layouts.css` oder `GUI/src/styles/global/surface-patterns.css` ergänzen.
+
 ## Aktueller Stand
-- `GUI/src/Layout.vue` wurde auf eine ruhigere, dateiorientierte App-Shell nach Style Guide umgebaut (klarere Topbar, strukturierte Sidebar, aufgeräumter Footer, responsive Drawer-Logik).
-- `GUI/src/routes/404NotFound.vue` wurde als konsistenter Hoard-Error-State mit Illustration, Primäraktion zur Startseite und Zurück-Aktion neu gestaltet.
-- `GUI/src/routes/authentication/Login.vue` wurde im gleichen Hoard-Schema als zweispaltige Login-Ansicht mit Branding-Bereich und fokussiertem Formular neu aufgebaut.
-- Globaler Darkmode ist in `Layout.vue` integriert (Topbar-Toggle, Persistenz in `localStorage`, automatisches Laden beim Start) und durch Theme-Tokens in `GUI/src/global.css` ergänzt.
-- `GUI/src/routes/Home.vue` ist jetzt eine Produkt-Startseite (Landingpage) zur App-Vorstellung statt einer Dashboard-Platzhalterkarte.
-- Das Brand-Element in `GUI/src/Layout.vue` nutzt nun das App-Icon (`GUI/src/assets/images/icon.png`) statt eines Platzhalter-Buchstabens; die Darstellung wurde im Topbar-Button sichtbar vergrößert.
-- Das Topbar-Icon in `GUI/src/Layout.vue` wurde nochmals deutlich größer gesetzt, damit das Branding besser sichtbar ist.
-- `GUI/src/routes/Impressum.vue` wurde von einem Platzhalter auf eine vollständige, designkonforme Impressum-Seite mit klarer Struktur und Testdaten umgestellt.
+- `GUI/src/Layout.vue` bildet die zentrale App-Shell mit Topbar, Sidebar, Footer, Routen-Kontext und responsivem Drawer-Verhalten.
+- Darkmode (`light`/`dark`) ist global integriert (Toggle in der Topbar, Persistenz in `localStorage`, Theme-Tokens in CSS/Vuetify).
+- Öffentliche Kernseiten sind im einheitlichen Hoard-Stil umgesetzt: `Home.vue` (Landingpage), `Login.vue`, `404NotFound.vue`, `Impressum.vue`.
+- Das Topbar-Branding nutzt das App-Icon aus `GUI/src/assets/images/icon.svg`.
+- Globale CSS-Struktur ist aktiv: `GUI/src/global.css` (Tokens/Basis) sowie `GUI/src/styles/global/page-layouts.css` und `GUI/src/styles/global/surface-patterns.css` für wiederverwendbare Patterns.
+- Sidebar-Sichtbarkeit unterstützt `Visibility.Route` mit optionalem `visibilityRoute` in `GUI/src/plugins/routesLayout.ts`.
 
 ## Änderungen durch Codex
-- Layout-Neubau in `GUI/src/Layout.vue` mit Brand-Bereich, Seitenkontext aus Route-Metadaten, überarbeiteter Navigation und designkonformer Footer-Struktur.
-- Neue 404-Seite in `GUI/src/routes/404NotFound.vue` im bestehenden Light-first-Design mit `hoard-panel`-Look und klaren Handlungsoptionen.
-- `GUI/src/Layout.vue` um Theme-Management erweitert (`light`/`dark` via Vuetify), inkl. Toggle-Button in der App-Bar und Speicherung unter `localStorage`-Key `theme`.
-- `GUI/src/plugins/vuetify.ts` um ein dunkles Theme ergänzt; `GUI/src/global.css` um `:root[data-theme='dark']`-Token-Overrides erweitert.
-- `GUI/src/routes/authentication/Login.vue` auf designkonforme Login-Oberfläche mit klarer Informationshierarchie, responsivem Layout und konsistenten Aktionen umgebaut.
-- Darkmode-Farbwelt in `GUI/src/global.css` und `GUI/src/plugins/vuetify.ts` von grünlastig auf neutralere Schwarz-/Grau-Basis umgestellt; Grün bleibt als Akzentfarbe für aktive/primäre UI-Elemente.
-- `GUI/src/routes/Home.vue` komplett als Landingpage neu gestaltet (Hero, Produktnutzen, Funktionsbereiche, Workflow, Tech-Stack, CTA), passend zur Hoard-Designsprache.
-- `GUI/src/plugins/routesLayout.ts` Beschreibung der Startseite auf App-Vorstellung statt Übersichts-Text angepasst.
-- Sichtbare UI-Texte in `Layout.vue`, `Home.vue`, `Login.vue`, `404NotFound.vue` und `routesLayout.ts` von Umschreibungen (`ae/oe/ue`) auf echte Umlaute (`ä/ö/ü`) umgestellt.
-- Sprachregel ergänzt: In UI-Texten sind echte Umlaute gewünscht; Umschreibungen (`ae/oe/ue`) sollen vermieden werden.
-- In `GUI/src/Layout.vue` wurde die Topbar-Branding-Grafik auf `GUI/src/assets/images/icon.png` umgestellt und größer skaliert.
-- Icon-Größe im Topbar-Branding von `GUI/src/Layout.vue` erneut erhöht (größerer Brand-Container und größere Icon-Darstellung).
-- Im Topbar-Branding von `GUI/src/Layout.vue` wurde der grüne Rahmen/Hintergrund entfernt; angezeigt wird nur noch das reine Icon.
-- Darkmode-Fix für `GUI/src/routes/404NotFound.vue`: Heller Weiß-Gradient entfernt und auf theme-basierte Surface-Mischungen umgestellt, damit keine helle Fläche mehr im Darkmode erscheint.
-- `GUI/src/plugins/routesLayout.ts` um `Visibility.Route` und die optionale Eigenschaft `visibilityRoute` erweitert; `GUI/src/Layout.vue` zeigt Sidebar-Einträge mit `Visibility.Route` nur noch an, wenn die aktuelle Route unter dem konfigurierten Pfad liegt (z. B. `/dash` und Unterrouten).
-- In `GUI/src/plugins/routesLayout.ts` wurde ein kurzer Kommentar ergänzt, der die Nutzung von `Visibility.Public`, `Visibility.Route`, `visibilityRoute` (einzeln/mehrfach) sowie typische Szenarien für die Sidebar-Sichtbarkeit beschreibt.
-- Fokusdarstellung in `GUI/src/global.css` für Vuetify-Inputs verbessert: Der doppelte grüne Fokusrahmen (zusätzlicher `focus-visible`-Outline im inneren `<input>`) wird unterdrückt; der Fokus bleibt über den Feldrahmen klar sichtbar.
-- Textauswahl (`::selection`) in `GUI/src/global.css` von kräftigem Grün auf eine subtilere Primär-Tönung reduziert, damit markierte Inhalte ruhiger wirken.
-- `GUI/src/routes/Impressum.vue` vollständig neu aufgebaut: Hero-Bereich, strukturierte Anbieter-/Kontakt-/Registerdaten, rechtliche Hinweisblöcke und klare Kennzeichnung als Testdaten im bestehenden Hoard-Design.
+- Grundlegender UI-Neuaufbau der App-Shell (`GUI/src/Layout.vue`) inklusive Navigation, Footer und Seitenkontext.
+- Einführung eines globalen Theme-Managements (`light`/`dark`) über `GUI/src/plugins/vuetify.ts`, `GUI/src/global.css` und `localStorage`.
+- Überarbeitung der zentralen öffentlichen Seiten (`Home.vue`, `Login.vue`, `404NotFound.vue`, `Impressum.vue`) auf ein einheitliches Hoard-Design.
+- Erweiterung von `GUI/src/plugins/routesLayout.ts` um routeabhängige Sidebar-Sichtbarkeit (`Visibility.Route`, `visibilityRoute`).
+- Konsolidierung der UI-Texte auf deutsche Umlaute gemäß Sprachregel.
+- Aufbau und fortlaufende Konsolidierung der globalen CSS-Basis (`global.css`) inkl. Fokus-/Auswahl-Polish.
+- CSS-Debloat-Refactor: gemeinsame Oberflächen-Patterns in `GUI/src/styles/global/page-layouts.css` und `GUI/src/styles/global/surface-patterns.css` ausgelagert und zentral in `GUI/src/main.ts` eingebunden.
+- `codexInfo.md` um eine kompakte Nutzunganleitung für die globalen CSS-Patterns ergänzt.