Modernize frontend: new design system, redesign all pages

- Convert codexInfo.md to CLAUDE.md as the central project context.
- Rewrite GUI/style.md with a modernized, file-first direction (layered
  surfaces, refined typography, motion budget, ambient gradients).
- Refresh global tokens in global.css, page-layouts.css and
  surface-patterns.css: extended palette (primary 050/800, surface
  elevated, border subtle), four-tier shadow system, dark-mode parity,
  new utilities (hoard-chip, hoard-icon-tile, hoard-spotlight,
  hoard-section-head, hoard-divider-soft, status pulse dot).
- Rebuild Layout.vue: premium app shell with brand halo, animated
  active-indicator, account pill with avatar/initials, drawer footer
  card, refined banner stack and footer.
- Redesign every route while preserving routing and API contracts:
  Home, Login, ChangePassword, Dashboard, AdminUsers, AdminUserDetail,
  Impressum, 404, Forbidden. Adds search/admin stats, password hint
  list, dashboard greeting with avatar, modernized hero/spotlight
  treatments and consistent mobile layouts (safe-areas, 44/48px tap
  targets).
- Drop @fontsource/roboto import in vuetify.ts and load Inter via the
  rsms.me CSS in index.html; update Vuetify defaults and palette to
  match the new tokens.

GUI/style.md

@@ -1,471 +1,358 @@
 # Hoard – Style Guide
 
 ## Zielbild
-Hoard soll wirken wie eine ruhige, moderne Dateiverwaltung im Browser: klar, aufgeräumt, produktiv und leicht verständlich. Nicht verspielt, nicht luxuriös, nicht wie ein komplexes Notion-Klon-System. Die Oberfläche soll in erster Linie Ordnung vermitteln und den Fokus auf Dateien, Ordner, Vorschau und Markdown-Bearbeitung legen.
+Hoard soll wirken wie eine **moderne, produktive Dateiverwaltung im Browser** – ruhig, klar und mit hoher visueller Sorgfalt. Die Grundphilosophie bleibt dateiorientiert: Inhalte, Dateinamen, Pfade und Aktionen stehen im Vordergrund, nicht UI-Effekte. Gleichzeitig darf sich Hoard hochwertig und präzise anfühlen – „polished" statt „fancy", näher an einer modernen Linear-/Vercel-/Notion-Sidebar als an einer alten Admin-UI.
 
-Die Gestaltung orientiert sich an drei Prinzipien:
+Die Gestaltung folgt drei Prinzipien:
 
-1. **Dateien zuerst** – Inhalte, Dateinamen, Pfade und Aktionen stehen optisch im Vordergrund.
-2. **Ruhige Oberfläche** – wenig visuelle Unruhe, viel Weißraum, zurückhaltende Farben.
-3. **Grün als Identität, nicht als Dauerfeuer** – die Markenfarbe wird gezielt für Auswahl, Primäraktionen und Status genutzt, nicht flächendeckend.
+1. **Dateien zuerst** – Inhalte, Namen, Strukturen und Aktionen sind optisch dominant, nicht die Chrome.
+2. **Ruhe mit Charakter** – viel Weißraum, klare Flächen, ausgewählte Akzente. Wenig Elemente, aber jedes mit Sorgfalt.
+3. **Grün als Identität, nicht als Dauerfeuer** – die Markenfarbe wird gezielt für Auswahl, Primäraktionen, Status und Branding eingesetzt – nicht flächendeckend.
 
-## Stilrichtung
-Die Seite soll sich optisch zwischen Google Drive und einer modernen self-hosted Admin-Oberfläche bewegen.
+## Modernisierungs-Direktive
+Beim Redesign gilt zusätzlich:
 
-**So soll es wirken:**
-- sachlich und sauber
-- freundlich, aber nicht verspielt
-- modern, aber bewusst einfach
-- produktiv statt marketing-lastig
-- leicht technisch, ohne kalt zu sein
+- **Hochwertige App-Shell:** Sidebar und Topbar dürfen sich „premium" anfühlen (klare Hierarchie, animierter Active-Indicator, gradient-tinged Brand-Bereich).
+- **Layered Surfaces:** Statt einer einzigen Surface-Farbe gibt es eine kleine Surface-Hierarchie (`surface`, `surface-alt`, `surface-elevated`) mit subtil gestaffelten Schatten.
+- **Microinteractions:** kurze, präzise Hover-/Active-/Focus-Animationen (160–240 ms). Keine wabernden, dauerhaften Bewegungen.
+- **Ambient Gradients:** Hero-/Brand-Bereiche dürfen sehr weiche, breit gestreute Verläufe in Markenfarbe haben. Arbeitsflächen bleiben funktional und ruhig.
+- **Typografische Präzision:** klare Größen-Hierarchie, ruhige Headlines, viel `letter-spacing` Disziplin, keine dekorativen Schriften.
+- **Konsistente Iconographie:** ausschließlich MDI Outline-Icons mit gleicher Größe und Farbverhalten.
+- **Light- und Dark-Mode gleichwertig:** alle neuen Stile müssen in beiden Modi funktional und ästhetisch tragen, ausschließlich über Tokens (`color-mix`, CSS-Variablen) gelöst.
 
-**So soll es nicht wirken:**
-- kein Neon- oder Gaming-Look
-- kein Glassmorphism
-- keine harten Kontraste überall
-- keine überladenen Kartenlayouts
-- keine bunte Mischung vieler Akzentfarben
+**Was weiterhin tabu ist:**
+- kein Glassmorphism (echte Backdrop-Blur-Karten),
+- kein Neon-/Gaming-Look,
+- keine harten, durchgängigen Kontraste,
+- keine Mehrfarbigkeit aus dem Akzent-Setup,
+- keine dauerhaften Animationen oder Parallax-Spielereien.
 
 ## Visuelle Identität
-Die Markenwirkung basiert auf neutralen Flächen mit einem kontrollierten Grün als Wiedererkennungsmerkmal. Das Grün kommt aus dem Logo und steht für Ablage, Struktur, Ruhe und „self-hosted tool“ statt „Social App“.
+Markenwirkung basiert auf neutralen, leicht warmen Flächen mit kontrolliertem Grün. Das Grün stammt aus dem Logo (Stapel-/Ordner-Idee) und steht für Ablage, Struktur und „self-hosted tool" statt „Social App". Akzent-Lime nur als gezielter Akzent-Glow im Branding und in Marketing-Sektionen.
 
-Die App bleibt **light-first**, aber Light- und Dark-Mode sind gleichwertig zu pflegen. Neue Komponenten müssen ihre Farben aus den Design-Tokens beziehen, damit beide Modi ohne Sonderlogik funktionieren.
+Die App ist **light-first**, Dark-Mode ist gleichwertig zu pflegen. Neue Komponenten beziehen Farben aus Design-Tokens.
 
 ## Farbpalette
 
-### Primärfarben
-- **Primary 700:** `#1C652F`  
-  Für Primärbuttons, aktive Icons, Fokusrahmen, Links in aktiven Zuständen.
-- **Primary 600:** `#2E7D32`  
-  Für Hover-Zustände und aktive Navigation.
-- **Primary 500:** `#3C8F42`  
-  Für ausgewählte Einträge, Badges, bestätigende States.
-- **Primary 300:** `#A8D5A2`  
-  Für weiche Hintergründe von Auswahlflächen.
-- **Primary 100:** `#EAF5E8`  
-  Für sehr subtile Hervorhebungen.
+### Primärfarben (Light)
+- **Primary 800:** `#10421E` – tiefster Markenton, Texte auf Light-Surface.
+- **Primary 700:** `#1C652F` – Primärbuttons, aktive Icons, Fokusrahmen.
+- **Primary 600:** `#2E7D32` – Hover-Zustände, aktive Navigation.
+- **Primary 500:** `#3C8F42` – ausgewählte Einträge, Badges, bestätigende States.
+- **Primary 300:** `#A8D5A2` – weiche Hintergründe für Auswahlflächen.
+- **Primary 100:** `#EAF5E8` – sehr subtile Hervorhebungen, Tints.
+- **Primary 050:** `#F4FAF1` – fast unsichtbare Pflasterfläche für Hero-Glows.
 
-### Akzentfarbe
-- **Accent Lime:** `#B7E36B`  
-  Nur sehr sparsam einsetzen, z. B. kleiner Glow im Logo-Bereich, leichtere Highlights, Upload-Fortschritt oder ausgewählte Illustrationsdetails. Nicht für normalen Text.
+### Akzent
+- **Accent Lime:** `#B7E36B` – sparsam: Logo-Glow, kleine Highlights, Upload-Fortschritt.
 
-### Neutrale Farben
-- **Background:** `#F6F8F5`  
-  Hauptseitenhintergrund.
-- **Surface 1:** `#FFFFFF`  
-  Karten, Panels, Modals, Dialoge.
-- **Surface 2:** `#F1F4EF`  
-  Sekundäre Flächen, Toolbar-Hintergründe, Tabellenkopf.
-- **Border:** `#DCE4D8`  
-  Standard-Border.
-- **Border Strong:** `#C7D2C2`  
-  Stärkere Abgrenzung bei Panels und Inputs.
+### Neutrale (Light)
+- **Background:** `#F5F8F2`
+- **Background Tint:** `#EEF3EA` – ambient Hintergrund-Verlauf.
+- **Surface:** `#FFFFFF` – Karten, Panels, Dialoge.
+- **Surface Alt:** `#F1F4EE` – Toolbar, Tabellenkopf, Sekundärflächen.
+- **Surface Elevated:** `#FBFCF8` – höhere Layer (Drawer-Inhalt, Dropdowns).
+- **Border:** `#DCE3D6`
+- **Border Strong:** `#C5CFBE`
+- **Border Subtle:** `#E8EDE2` – innere Trennlinien.
 
-### Textfarben
-- **Text Primary:** `#1F2A21`
-- **Text Secondary:** `#5F6E62`
-- **Text Muted:** `#7D8A80`
+### Text (Light)
+- **Text Primary:** `#1A2A1E`
+- **Text Secondary:** `#5A6A5E`
+- **Text Muted:** `#7B897F`
 - **Text On Primary:** `#FFFFFF`
 
-### Statusfarben
-Schlicht halten, nicht zu bunt.
+### Dark Mode
+Dark-Mode wird vollständig über Tokens gespiegelt. Eckwerte:
+- Background: `#0E1115`
+- Surface: `#161A20`
+- Surface Alt: `#1B2028`
+- Surface Elevated: `#1F252E`
+- Border: `#2A323D`
+- Border Strong: `#3A4452`
+- Text Primary: `#E9EFF3`
+- Text Secondary: `#B6BEC8`
+- Primary 700 (dark): `#5FB968`
+- Primary 600 (dark): `#4EA758`
+- Primary 100 (dark): `#1F2922`
+
+### Status
 - **Success:** `#2E7D32`
 - **Warning:** `#B7791F`
 - **Danger:** `#C0392B`
 - **Info:** `#2F6FB3`
 
 ## Typografie
-Die Typografie soll neutral, gut lesbar und unauffällig modern sein. Keine dekorativen Schriften.
+Neutral, gut lesbar, unauffällig modern – keine dekorativen Schriften.
 
-**Empfohlene Schriftfamilie:**
-- `Inter`
-- Fallback: `system-ui, sans-serif`
+**Stack:** `Inter, "Segoe UI", Roboto, system-ui, sans-serif`
 
-**Typografische Regeln:**
-- normale Lesetexte: 14–15 px
-- UI-Haupttext in Listen und Tabellen: 14 px
-- Seitenüberschriften: 24–28 px
-- Bereichsüberschriften: 18–20 px
-- kleine Meta-Infos: 12–13 px
-- Zeilenhöhe großzügig halten, besonders in Dateilisten und Formularen
-- Schriftgrößen nicht mit Viewport-Breite skalieren; responsive Größen über feste Werte in Breakpoints setzen
+**Skala (rem-orientiert, fixe px-Breakpoints, keine viewport-Skalierung):**
+- `--font-size-2xs`: 11px – Status-Labels, Mini-Meta.
+- `--font-size-xs`: 12px – Tabellenmeta, Helper-Text.
+- `--font-size-sm`: 13px – sekundärer UI-Text.
+- `--font-size-md`: 14px – Standard-UI-Text, Listen.
+- `--font-size-lg`: 16px – akzentuierte UI-Hervorhebung.
+- `--font-size-xl`: 20px – Bereichsüberschriften.
+- `--font-size-2xl`: 26px – Seitenüberschriften.
+- `--font-size-3xl`: 32px – Display-Headlines (Hero).
+- `--font-size-display`: 44px – sehr seltene Marketing-Display-Texte.
 
-**Schriftgewicht:**
-- 400 für normalen Fließtext
-- 500 für UI-Text und Labels
-- 600 für Titel und aktive Elemente
-- 700 nur sehr gezielt
+**Gewichte:**
+- 400 für Fließtext.
+- 500 für UI-Text und Labels.
+- 600 für Titel, Kicker, aktive Items.
+- 700 nur sehr gezielt (Display-Headlines, Logo-Wortmarke).
 
-## Layoutprinzip
-Das Layout soll stark an eine Dateiverwaltung erinnern.
+**Letter-Spacing-Disziplin:**
+- Display-Headlines: leicht negatives Tracking (`-0.01em` bis `-0.02em`).
+- Kicker/Labels (uppercase): `0.05em` bis `0.08em`.
+- Standard: `0`.
 
-### Grundaufbau
-- **Topbar** für Logo, Breadcrumbs, Kontextaktionen, Benutzer-Menü
-- **linke Sidebar** für Navigation
-- **Hauptbereich** für Dateiliste oder Grid
-- **rechte Vorschau / Detailansicht** optional als Panel oder getrennte Ansicht
+## Spacing
+Modulare Skala in 4er-Schritten:
 
-### Seitenbreite und Abstand
-- großzügige horizontale Abstände
-- Hauptinhalte nicht zu schmal machen
-- Panels mit genug Luft, aber ohne Dashboard-Overdesign
-- Standard-Abstandssystem in 4er- oder 8er-Schritten
+```
+--space-1: 4px
+--space-2: 8px
+--space-3: 12px
+--space-4: 16px
+--space-5: 20px
+--space-6: 24px
+--space-7: 28px
+--space-8: 32px
+--space-10: 40px
+--space-12: 48px
+--space-16: 64px
+```
 
-**Spacing-Skala:**
-- 4 px
-- 8 px
-- 12 px
-- 16 px
-- 20 px
-- 24 px
-- 32 px
-- 40 px
+Hauptseiten: `--hoard-page-width` 1120–1200px, Padding orientiert sich an `--space-6`/`--space-8`.
 
-## Formensprache
-Die Formensprache soll weich, aber nicht rundgelutscht sein.
+## Formensprache (Border-Radien)
+- `--radius-xs`: 6px – kleine Pills, Status-Badges.
+- `--radius-sm`: 10px – Buttons, kleine Controls.
+- `--radius-md`: 14px – Inputs, Dropdowns, Listzeilen.
+- `--radius-lg`: 18px – Cards, Panels.
+- `--radius-xl`: 22px – Hero-Shells, Modals.
+- `--radius-full`: 999px – nur für Avatar/Tag-Pills.
 
-- kleine Controls: `8px` Radius
-- Panels, Inputs, Dropdowns: `10px`
-- Modals und größere Karten: `14px`
-- keine pillenförmigen Vollflächen als Grundstil
+Keine pillenförmigen Vollflächen als Grundstil.
 
-## Schatten und Tiefe
-Sehr zurückhaltend einsetzen. Die App soll stabil und ruhig wirken, nicht schwebend.
+## Schatten & Tiefe
+Mehrstufiges, sehr ruhiges Schatten-System:
 
-**Standard-Schatten:**
-- Panels: leichter, weicher Schatten
-- Dropdowns / Modals: etwas stärker, aber nie dramatisch
-- keine starken farbigen Schatten im Produktivbereich
-- grüner Glow nur höchstens im Branding oder auf Marketing-/Login-Flächen
-- Hover-Lift maximal 1–2 px und nur bei klar interaktiven Flächen oder Demo-Karten
+```
+--shadow-xs: 0 1px 1px rgba(20, 30, 22, 0.04);
+--shadow-sm: 0 2px 6px rgba(20, 30, 22, 0.06);
+--shadow-md: 0 8px 22px rgba(20, 30, 22, 0.08);
+--shadow-lg: 0 18px 44px rgba(20, 30, 22, 0.12);
+--shadow-glow: 0 12px 36px rgba(28, 101, 47, 0.18);
+```
 
-## Komponentenstil
+Regeln:
+- Panels: `--shadow-sm`.
+- Hover-Lift max. 2 px, nur bei klar interaktiven Elementen.
+- Dropdowns/Modals: `--shadow-md` bis `--shadow-lg`.
+- `--shadow-glow` ausschließlich für Brand-Bereiche (Login-Hero, Welcome-Hero).
+- Keine farbigen Schatten in Arbeitsflächen.
+
+## Motion
+- Standard-Easing: `cubic-bezier(0.2, 0, 0, 1)`.
+- `--transition-fast`: 160 ms (Hover, Buttons, Listzeilen).
+- `--transition-medium`: 220 ms (Route-Wechsel, Banner).
+- `--transition-slow`: 320 ms (Hero-Enter, Drawer).
+- Globale Page-Enter-Animation: weicher Y-Slide + Fade (≤ 8 px).
+- `prefers-reduced-motion`: alle Transitions auf 1 ms reduzieren, keine Translates.
+
+## App-Shell
 
 ### Topbar
-Die Topbar ist ruhig und funktional.
-- Höhe ca. 60–64 px
-- heller Hintergrund oder leicht abgesetzte Surface-Farbe
-- Logo links
-- Breadcrumbs klar lesbar, nicht zu klein
-- Kontextaktionen rechts davon oder am rechten Rand
-- dünne Unterkante oder subtile Shadow-Abgrenzung
+- Höhe ca. 64 px, opaker `surface`-Hintergrund, dünne Bottom-Border.
+- Branding links: Icon + Wortmarke + dezenter Subtext („Self-hosted Workspace").
+- Page-Kontext (Name + Beschreibung) als sekundäre Info, nur ab `>1180px`.
+- Rechts: Theme-Toggle, Account-Menü oder Login-Button.
+- Subtile bottom shadow (`--shadow-xs`).
 
 ### Sidebar
-Die Sidebar ist funktional, nicht dominant.
-- feste Breite, ca. 240–280 px
-- leicht abgesetzte Hintergrundfläche
-- aktive Einträge mit heller grüner Fläche und dunklerem Text
-- Icons schlicht und einheitlich
-- Navigation in logische Gruppen, aber ohne zu viele Sektionen
+- Breite 268–284 px, Hintergrund `surface-alt`, leicht abgesetzt.
+- Active-Indicator: linker, animierter, vertikaler Strich (`--color-primary-600`) + grüne Tint-Fläche + dunklerer Text.
+- Hover: leichte Tint-Fläche, kein Scaling.
+- Sektionen mit Kicker-Labels (`Navigation`, `Admin`).
+- Mindesthöhe pro Item: 44 px (Desktop), 48 px (Mobile).
+- Mobile = Bottom-Sheet-Drawer mit abgerundeten Top-Ecken.
 
-### Dateiliste
-Die Dateiliste ist das Herzstück der App.
+### Footer
+- Sehr ruhig, kompakt, `surface` mit dünner oberer Border.
+- Links nur auf rechtlich/strukturell wichtige Routen (Impressum etc.).
+- Mobile: in Grid mit Tap-Größen ≥ 44 px.
 
-**Darstellung:**
-- standardmäßig Listenansicht
-- klare Spalten für Name, Typ, Größe, geändert am
-- Zeilenhöhe eher luftig statt kompakt gepresst
-- Hover nur leicht hervorheben
-- ausgewählte Zeile mit heller grüner Tönung
-- Doppelklick oder klarer Primärklick zum Öffnen
-- Dateisymbole farblich dezent
+## Komponenten
 
-**Wichtig:**
-Die Liste soll strukturierter und ruhiger wirken als ein typisches Admin-Grid. Nicht wie eine Datenbanktabelle, sondern wie eine echte Dateiverwaltung.
-
-### Karten / Panels
-Karten nur dort einsetzen, wo es fachlich Sinn ergibt:
-- Vorschau-Panel
-- Datei-Infos
-- Upload-Status
-- Modals
-
-Nicht jede Seite künstlich in zehn Karten aufteilen.
+### Cards / Panels
+- Hintergrund: `surface` mit subtilem 180°-Verlauf zu `surface-alt`.
+- Border: `--color-border`.
+- Radius: `--radius-lg`.
+- Padding: `--space-6` (Standard), kleinere Inhalte `--space-4`.
+- Hover (nur klar interaktive Cards): Border in Primary-300-Mix, `--shadow-md`, 2 px Y-Lift.
 
 ### Buttons
-Buttons sollen schlicht und klar sein.
-
-**Primärbutton:**
-- grüner Hintergrund
-- weiße Schrift
-- mittlere Höhe
-- klar erkennbare Hover- und Disabled-Zustände
-
-**Sekundärbutton:**
-- helle Fläche mit Border
-- dunkler Text
-- kein zu aggressiver Kontrast
-
-**Tertiärbutton / Icon-Button:**
-- für Zeilenaktionen, Toolbar, Preview-Aktionen
-- Hover mit leichter Surface-Abhebung
-
-**Regel:**
-Es sollte pro Bereich meist genau eine klare Primäraktion geben.
+- **Primary:** grüner Hintergrund (`--color-primary-700`), weiße Schrift, `--shadow-xs`. Hover: `--color-primary-600` + leichter Glow. Active: ohne Lift.
+- **Outlined:** transparenter Hintergrund, `--color-border-strong`, dunkler Text. Hover: leichte Primary-Tint-Fläche, Border zu Primary-Mix.
+- **Text/Tertiary:** für Zeilenaktionen, Toolbar, Nav. Hover: Surface-Tint.
+- **Icon-Buttons:** mind. 40×40 (Desktop), 44×44 (Mobile).
+- Letter-Spacing 0, kein Uppercase.
+- Pro Bereich genau **eine Primäraktion**.
 
 ### Inputs
-- weiße Fläche
-- klarer Border
-- Fokuszustand mit grünem Ring oder grün betonter Border
-- keine dunklen, schweren Inputs
-- Labels oberhalb statt Placeholder-only
+- Outline-Variante, `surface` Hintergrund.
+- Border `--color-border-strong`, Focus-Ring 3 px Primary-300-Tint + Primary-600-Border.
+- Labels oberhalb (Vuetify-Outlined-Label), keine reinen Placeholder.
+- Mind. 44 px Höhe auf Mobile.
 
-### Modals und Dialoge
-- kompakt und funktional
-- deutlicher Titel
-- klare Primär- und Sekundäraktion
-- nicht zu breit
-- Löschen-Aktionen visuell bewusst neutral mit Danger-Akzent nur am Button
+### Listen / Tabellen
+- Tabelle: `surface` Hintergrund, abgesetzter Tabellen-Header (`surface-alt`).
+- Hover: sehr subtile Primary-Tint-Tönung.
+- Selected Row: Primary-100 Hintergrund, `--color-primary-700` Text.
+- Border-Bottom in `--color-border-subtle`.
+- `hoard-list-row` (Datei-/Item-Zeilen): luftiges Padding, klare Spalten, `transform: translateX(2px)` beim Hover.
 
-### Dropdowns und Kontextmenüs
-- schlicht, hell, sauber getrennte Einträge
-- Icons optional, aber konsistent
-- Hover klar sichtbar
-- kritische Aktionen unten gruppieren
+### Status-Pills (`hoard-status`)
+- Kompakt, `--radius-xs`, mit dezentem Text/Background-Tint pro Status (Success/Info/Warning/Danger/Neutral).
+- Optional kleines Punktindikator-Dot vor dem Text.
 
-## Vorschau-Bereich
-Der Vorschau-Bereich ist ein zentraler Teil von Hoard und soll hochwertig, aber ruhig wirken.
+### Banner-Stack
+- Position: fixiert unten rechts (Desktop), unten zentriert (Mobile).
+- Stapelbar, einzeln dismissable.
+- Opake Hintergründe, `--shadow-md`, sauber lesbar auf jedem Inhalt.
+- Enter/Leave: 180 ms Fade + 10 px Y.
 
-### PDF-Vorschau
-- heller neutraler Hintergrund
-- PDF sitzt auf einer weißen „Papier“-Fläche
-- genug Rand um die Seite herum
-- Controls minimal und funktional
+## Hero-/Marketing-Bereiche
+- Erlauben einen **ambient Verlauf** (`hoard-panel-gradient` + Variablen).
+- Optional dezenter „Spotlight"-Glow (radialer Verlauf, `--color-primary-300` mit niedriger Opazität, blur).
+- Inhaltsbreite max ~64ch.
+- Display-Headlines mit `--font-size-3xl` oder `--font-size-display` (nur Hero).
+- Hero-Tags (`hoard-chip`/`hoard-tag`) als kompakte, dezent gerahmte Pills.
 
-### Bildvorschau
-- dunklerer neutraler Viewer-Hintergrund ist okay, wenn das Bild dadurch besser wirkt
-- umgebende UI trotzdem konsistent mit dem restlichen Produkt halten
-- keine übertriebene Galerie-Optik
+## Vorschau-Bereich (Files)
+- **PDF-Vorschau:** neutraler Hintergrund, weiße „Papier"-Fläche mit `--shadow-md`, genug Rand. Controls minimal.
+- **Bildvorschau:** dunklerer neutraler Viewer-Hintergrund nur, wenn das Bild dadurch besser wirkt; UI-Chrome konsistent.
+- **Markdown-Editor/Reader:** wirkt wie ein Arbeitsdokument, nicht wie Blogpost. Lesbreite ~70ch, klare Heading-Hierarchie, sehr ruhige Codeblöcke.
 
-### Markdown-Ansicht / Editor
-Markdown-Dateien sollen wie Arbeitsdokumente wirken, nicht wie Blogposts.
-
-**Vorgaben:**
-- gute Textbreite
-- klare Hierarchie bei Überschriften
-- dezente Codeblock-Gestaltung
-- sehr gute Lesbarkeit
-- Editor und Preview optisch zur restlichen App passend, auch wenn `md-editor-v3` eigene Defaults mitbringt
-
-## Tabellen- und Listenverhalten
-Da der Kern deiner App Listen, Dateiansichten und Metadaten sind, muss das Verhalten konsistent sein.
-
-- Hover ist immer subtil
-- Auswahl ist immer über denselben Grünton markiert
-- aktive Navigation und aktive Listelemente nutzen dieselbe semantische Farbe
-- Sortierung, falls später vorhanden, visuell zurückhaltend markieren
-- Bulk-Actions nur anzeigen, wenn wirklich etwas ausgewählt ist
-
-## Icons
-Empfohlen ist ein schlanker, moderner Icon-Stil mit einheitlicher Konturstärke.
-
-Geeignet wären z. B.:
-- Lucide
-- Heroicons
-
-**Regeln:**
-- möglichst Outline-Icons
-- nur wenige gefüllte Icons
-- Dateityp-Icons dürfen leicht differenziert sein, aber nicht bunt explodieren
-- Ordner-Icon in gedecktem Grün oder neutralem Grau
-
-## Status und Feedback
-Feedback soll klar sein, aber nicht laut.
-
-### Toasts
-- kurze Texte
-- kein unnötiger Fließtext
-- success, error, info klar unterscheidbar
-- am besten oben rechts oder unten rechts, aber konsistent
-
-### Ladezustände
-- Skeletons oder sehr schlichte Loader
-- lieber ruhige Platzhalter statt hektische Spinner überall
-
-### Leere Zustände
-Leere Zustände sollen freundlich, aber nüchtern sein.
-- kleines Icon oder einfache Illustration
-- ein klarer Satz
-- eine eindeutige Folgeaktion
-
-## Login-Seite
-Die Login-Seite darf minimal etwas mehr Branding zeigen als die Haupt-App.
-
-**Empfehlung:**
-- zentrierte Login-Card
-- Logo sichtbar
-- neutraler Hintergrund mit sehr leichter grüner Stimmung
-- keine starke Hero-Sektion nötig
-- Fokus auf schnellem Einstieg
+## Empty-/Loading-States
+- Empty: kleines Outline-Icon in Primary-Tint, kurzer Titel, ein Satz Begründung, eine klare CTA.
+- Loading: Skeletons (graue Pulslinien) bevorzugt, ansonsten ein kleiner zentraler Spinner mit beschreibendem Text. Keine flackernden Spinner-Felder.
 
 ## Responsive Verhalten
-Desktop ist der Hauptfokus. Mobile muss funktionieren, aber nicht die Priorität des MVP sein.
+Desktop ist Hauptfokus, Mobile muss aber sauber funktionieren.
 
-### Desktop
-- volle Sidebar
-- großzügige Dateiliste
-- Preview neben Liste möglich
+### Breakpoints
+- `@media (width <= 1180px)` – Topbar-Kontextleiste verkürzen.
+- `@media (width <= 960px)` – Sidebar wird Bottom-Drawer; Karten-/Grid-Bereiche werden einspaltig; Spacing wird reduziert.
+- `@media (width <= 600px)` – CTAs full-width; Schriften minimal kompakter; Footer als Grid; Status-Pills behalten Lesbarkeit.
 
-### Tablet
-- Sidebar einklappbar
-- Preview eher als Overlay oder eigene Ansicht
-
-### Mobile
-- eher einfache Stapelansicht
-- Fokus auf Navigation und Öffnen
-- Bearbeitung von Markdown darf reduziert sein, solange Lesen und einfache Bedienung sauber funktionieren
-
-### Umsetzungsstandard Responsivität (verbindlich)
-Die folgenden Regeln bilden den aktuellen Responsive-Standard von Hoard und sollen bei allen kommenden UI-Aufgaben eingehalten werden.
-
-1. **Desktop-first, Mobile-only Overrides**
-- Desktop-Styles bleiben Basis.
-- Mobile-Anpassungen ausschließlich in Media Queries, keine Änderungen an Desktop-Baseregeln.
-
-2. **Breakpoints**
-- `@media (width <= 960px)` für Tablet/Mobile-Umbruch (Layout-Stacks, Spacing-Reduktion, Drawer-/Footer-Verhalten).
-- `@media (width <= 600px)` für Phone-Feinschliff (volle Breite für CTAs, kompaktere Typo/Abstände).
-
-3. **Globale Responsive-Patterns zuerst nutzen**
-- Wiederverwendbare Anpassungen immer zuerst in den globalen Dateien pflegen:
-  - `GUI/src/global.css`
-  - `GUI/src/styles/global/page-layouts.css`
-  - `GUI/src/styles/global/surface-patterns.css`
-- Seiten-spezifisches `scoped` CSS nur für wirklich lokale Sonderfälle.
-
-4. **Touch-Zielgrößen und Bedienbarkeit**
-- Interaktive Elemente mobil mit klarer Daumen-Bedienbarkeit:
-  - Buttons mindestens `44px` Höhe.
-  - Icon-Buttons mindestens `44x44px`.
-  - Navigations-Listeneinträge mindestens `48px` Höhe.
-- Aktionszeilen (`hoard-action-row`) auf kleinen Geräten vertikal stapeln, damit Primäraktionen gut erreichbar sind.
-
-5. **Safe-Area-Unterstützung**
-- Bei mobilen Außenabständen `env(safe-area-inset-*)` berücksichtigen (iOS/Android).
-- Muster: `max(var(--space-x), env(safe-area-inset-...))` als Fallback-sicherer Abstand.
-- Besonders relevant für App-Bar-Ränder, Seiten-Padding und Bottom-Bereiche (Drawer/Footer).
-
-6. **App-Shell-Muster**
-- Mobile Navigation bleibt als Bottom-Sheet-Drawer.
-- Desktop-Navigation bleibt unverändert (keine visuelle Regression auf großen Viewports).
-- Footer-Links auf kleinen Screens umbauen (Wrap/Grid), mit ausreichend großen Tap-Flächen.
-
-7. **Seiten-Muster**
-- Content-Änderungen vermeiden; nur Layout/Bedienung anpassen.
-- Karten-/Grid-Bereiche bei `<= 960px` in Einspalten-Layout überführen.
-- Primäre CTAs bei `<= 600px` in voller Breite anzeigen.
-
-8. **Responsive QA vor Abschluss**
-- Pflicht-Viewports: `360x800`, `390x844`, `768x1024`, `1024x768`, `>=1280`.
-- Prüfen: Navigation, Scroll-Verhalten, CTA-Erreichbarkeit, Formular-Bedienbarkeit.
-- Light- und Dark-Mode jeweils mindestens auf Desktop und Mobile prüfen.
-- Desktop-Regression-Check: bei `>=1024` darf sich das gewollte Desktop-Erscheinungsbild nicht ändern.
+### Pflicht
+- Desktop-Baseregeln nicht anfassen, nur Mobile-Overrides per Media Query.
+- Touch-Größen: Buttons ≥ 44 px, Icon-Buttons ≥ 44×44, Nav-Items ≥ 48 px.
+- Safe-Areas via `env(safe-area-inset-*)` (Topbar-Padding, Footer/Drawer Bottom).
+- Banner-Stack respektiert Safe-Area Bottom.
+- Pflicht-Viewports im QA: `360x800`, `390x844`, `768x1024`, `1024x768`, `>=1280` – jeweils Light + Dark.
 
 ## Interaktionsprinzipien
-- Primäraktionen immer klar sichtbar
-- destruktive Aktionen nie zu nah an Standardaktionen
-- Dateizeilen sollen sich klickbar anfühlen, ohne wie Buttons auszusehen
-- Hover, Active und Selected Zustände deutlich unterscheiden
-- Fokuszustände für Tastaturbedienung sauber sichtbar machen
-
-## Stil für konkrete Bereiche
-
-### Ordnernavigation
-- Breadcrumbs schlicht, klickbar, gut lesbar
-- aktueller Ordner klar markiert
-- Pfad nie visuell dominanter als der Inhalt
-
-### Upload-Bereich
-- Uploads funktional anzeigen, nicht dramatisch
-- Fortschritt mit ruhiger grüner Progressbar
-- Fehlerfälle klar lesbar
-- Upload-Liste eher kompakt halten
-
-### Datei-Details
-- Metadaten in sauberem Zwei-Spalten-Raster oder kompakter Liste
-- Labels und Werte klar unterscheidbar
-- Aktionen wie Download, Umbenennen, Löschen klar getrennt
+- Primäraktionen klar sichtbar.
+- Destruktives nie direkt neben Standardaktion.
+- Dateizeilen sind klickbar, dürfen aber nicht wie Buttons aussehen.
+- Hover, Active und Selected klar unterscheidbar (unterschiedliche Tints/Outlines).
+- Fokus für Tastaturbedienung immer sichtbar (`outline: 2px solid var(--color-primary-500); outline-offset: 2px`).
 
 ## Designregeln für die Umsetzung
 
-### Immer tun
-- viel Weißraum lassen
-- Grün nur gezielt einsetzen
-- Borders und Surface-Unterschiede subtil halten
-- Listen und Dateiansichten priorisieren
-- Text gut lesbar und eher neutral halten
+### Immer
+- Tokens nutzen (Farben, Spacing, Radius, Shadow).
+- Patterns wiederverwenden (`hoard-panel`, `hoard-page`, `hoard-action-row`, `hoard-kicker`, `hoard-status`, `hoard-chip`, `hoard-spotlight`).
+- Light- und Dark-Mode gleichwertig prüfen.
+- Animationen kurz halten und `prefers-reduced-motion` respektieren.
 
 ### Vermeiden
-- zu viele Karten
-- zu viele Farbflächen
-- übertriebene Animationen
-- mehrere konkurrierende Akzentfarben
-- rein dekorative UI-Elemente ohne Nutzen
+- zu viele Karten ohne Funktion,
+- zu viele Akzentfarben gleichzeitig,
+- harte 1:1-Kontraste,
+- echte Glasflächen / Backdrop-Blur,
+- dauernde Bewegungen,
+- Schriftgrößen, die mit der Viewport-Breite skalieren.
 
-## Beispiel für Design Tokens
-Diese Tokens können später direkt in CSS-Variablen oder ein Theme übernommen werden.
+## Beispiel: Design-Tokens
 
 ```css
 :root {
-  --color-bg: #F6F8F5;
-  --color-surface: #FFFFFF;
-  --color-surface-alt: #F1F4EF;
-  --color-border: #DCE4D8;
-  --color-border-strong: #C7D2C2;
+  /* Surfaces */
+  --color-bg: #f5f8f2;
+  --color-bg-tint: #eef3ea;
+  --color-surface: #ffffff;
+  --color-surface-alt: #f1f4ee;
+  --color-surface-elevated: #fbfcf8;
 
-  --color-text: #1F2A21;
-  --color-text-secondary: #5F6E62;
-  --color-text-muted: #7D8A80;
+  --color-border: #dce3d6;
+  --color-border-strong: #c5cfbe;
+  --color-border-subtle: #e8ede2;
 
-  --color-primary-700: #1C652F;
-  --color-primary-600: #2E7D32;
-  --color-primary-500: #3C8F42;
-  --color-primary-300: #A8D5A2;
-  --color-primary-100: #EAF5E8;
-  --color-accent-lime: #B7E36B;
+  /* Text */
+  --color-text: #1a2a1e;
+  --color-text-secondary: #5a6a5e;
+  --color-text-muted: #7b897f;
+  --color-text-on-primary: #ffffff;
 
-  --color-success: #2E7D32;
-  --color-warning: #B7791F;
-  --color-danger: #C0392B;
-  --color-info: #2F6FB3;
+  /* Brand */
+  --color-primary-800: #10421e;
+  --color-primary-700: #1c652f;
+  --color-primary-600: #2e7d32;
+  --color-primary-500: #3c8f42;
+  --color-primary-300: #a8d5a2;
+  --color-primary-100: #eaf5e8;
+  --color-primary-050: #f4faf1;
+  --color-accent-lime: #b7e36b;
 
-  --radius-sm: 8px;
-  --radius-md: 10px;
-  --radius-lg: 14px;
+  /* Status */
+  --color-success: #2e7d32;
+  --color-warning: #b7791f;
+  --color-danger: #c0392b;
+  --color-info: #2f6fb3;
 
-  --shadow-sm: 0 1px 2px rgba(16, 24, 18, 0.06);
-  --shadow-md: 0 6px 18px rgba(16, 24, 18, 0.08);
+  /* Radius */
+  --radius-xs: 6px;
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --radius-lg: 18px;
+  --radius-xl: 22px;
+  --radius-full: 999px;
 
+  /* Shadows */
+  --shadow-xs: 0 1px 1px rgba(20, 30, 22, 0.04);
+  --shadow-sm: 0 2px 6px rgba(20, 30, 22, 0.06);
+  --shadow-md: 0 8px 22px rgba(20, 30, 22, 0.08);
+  --shadow-lg: 0 18px 44px rgba(20, 30, 22, 0.12);
+  --shadow-glow: 0 12px 36px rgba(28, 101, 47, 0.18);
+
+  /* Spacing */
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
   --space-5: 20px;
   --space-6: 24px;
+  --space-7: 28px;
   --space-8: 32px;
   --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+
+  /* Motion */
+  --transition-fast: 160ms cubic-bezier(0.2, 0, 0, 1);
+  --transition-medium: 220ms cubic-bezier(0.2, 0, 0, 1);
+  --transition-slow: 320ms cubic-bezier(0.2, 0, 0, 1);
 }
 ```
 
-## Abschlussentscheidung für Hoard
-Für Hoard ist ein **ruhiger, light-first, dateiorientierter Produktivstil mit neutralen Flächen und kontrolliertem Grün als Markenfarbe** die passendste Richtung.
-
-Das passt zur Produktidee, weil:
-- die App primär eine Dateiverwaltung ist
-- Markdown-Bearbeitung und Vorschau im Vordergrund stehen
-- die Oberfläche einfach und wartbar bleiben soll
-- der Stil gut allein umsetzbar ist
-- die UI professionell wirkt, ohne nach großem SaaS-Produkt aussehen zu müssen
-
 ## Kurzfassung als Design-Leitlinie
-Wenn du bei einer UI-Entscheidung unsicher bist, gilt:
+Wenn du bei einer UI-Entscheidung unsicher bist:
 
-**Lieber schlichter als spektakulär. Lieber Google-Drive-artig als Dashboard-artig. Lieber ruhige Flächen und klare Listen als visuelle Effekte. Grün ist Identität, nicht Dekoration.**
-
-## Aktuelle Modernisierungsregeln
-- Oberflächen dürfen subtile lineare Surface-Verläufe, weichere Schatten und klare Fokusrahmen nutzen.
-- Route-Wechsel, Banner und wichtige Seitenbereiche dürfen kurze Fade-/Slide-Animationen verwenden.
-- Animationen bleiben ruhig: ca. 160–260 ms, keine dauerhaften Bewegungen, `prefers-reduced-motion` beachten.
-- Brand- und Navigationsbereiche dürfen etwas hochwertiger wirken, die Arbeitsflächen bleiben funktional und ruhig.
-- Zusätzliche UI-Elemente sind erlaubt, solange sie aus vorhandenen Daten entstehen und keine API-Calls oder Funktionen ändern.
-- QA immer in Light- und Dark-Mode sowie mobil prüfen; insbesondere Navigation, Formulare, Tabellen und Banner.
+**Lieber präzise als spektakulär. Lieber ruhige Flächen mit Charakter als visuelle Effekte. Grün ist Identität, nicht Dekoration. Jedes Element muss eine Funktion haben – sonst fliegt es raus.**