chore: overhaul infrastructure and integrate @mintel packages

- Restructure to pnpm monorepo (site moved to apps/web)
- Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config
- Implement Docker service architecture (Varnish, Directus, Gatekeeper)
- Setup environment-aware Gitea Actions deployment

apps/web/docs/STYLEGUIDE.md

@@ -0,0 +1,74 @@
+# Style Guide: Digital Architect
+
+This document defines the visual language and design rules for the Mintel ecosystem. The goal is to maintain a "Digital Architect" aesthetic: technical, reductionist, and high-fidelity.
+
+## 1. Core Philosophy: Reduction to Essentials
+
+The design should feel "Websites ohne Overhead." Every element must serve a purpose. If it doesn't add value, remove it.
+
+- **Technical Precision**: Use grids, mono-spaced labels, and clear hierarchies to signal technical competence.
+- **Tactile Digital Objects**: UI elements should feel like physical objects (buttons that depress, tags that pop in, glass that blurs).
+- **High Contrast**: Bold black/slate on clean white backgrounds, with vibrant highlighter accents.
+
+## 2. Color Palette
+
+The project uses a monochrome base with curated highlighter accents.
+
+- **Primary Base**: 
+    - **Backgrounds**: Pure White (`#ffffff`) for clarity.
+    - **Surfaces**: Slate-50 for subtle depth, White with 90% opacity + 10px blur for glassmorphism.
+- **Grays (Slate)**: 
+    - **Text**: Slate-800 for body, Slate-900 for headings.
+    - **UI Borders**: Slate-100 or Slate-200.
+    - **Muted text**: Slate-400 or Slate-500.
+- **Highlighter Accents**: Used exclusively for tags, markers, and selective emphasis.
+    - **Yellow**: Warm, high-visibility (`rgba(255, 235, 59, 0.95)`).
+    - **Pink**: Vibrant, energetic (`rgba(255, 167, 209, 0.95)`).
+    - **Green**: Success, technical health (`rgba(129, 199, 132, 0.95)`).
+    - **Blue**: Neutral, structural (`rgba(226, 232, 240, 0.95)`).
+
+## 3. Typography
+
+A high-contrast mix of fonts that balances modern tech with editorial readability.
+
+- **Headings (Sans-serif)**: Use **Inter**.
+    - Tracking: `-0.025em` to `-0.05em` (tracking-tighter).
+    - Weight: Bold (`700`).
+    - Color: Slate-900.
+- **Body (Serif)**: Use **Newsreader** or Georgia.
+    - Style: Defaults to serif for long-form content to provide a "notebook" feel.
+    - Line-height: Relaxed (`1.6` to `1.75`).
+- **Technical (Monospace)**: Use **JetBrains Mono**.
+    - Usage: Small labels, tags, code snippets, and "Mono-Labels" (e.g., section numbers).
+    - Feature: Uppercase with wide tracking (`0.3em` to `0.4em`).
+
+## 4. Layout & Rhythm
+
+Standardized containers ensure consistency across different screen sizes.
+
+- **Standard Container**: Max-width 6xl (`72rem`). Used for most page sections.
+- **Wide Container**: Max-width 7xl (`80rem`). Used for galleries or high-impact visuals.
+- **Narrow Container**: Max-width 4xl (`56rem`). Used for focused reading and blog posts.
+- **Section Rhythm**: Sections are separated by clear `border-top` lines and numbered (e.g., "01", "02").
+
+## 5. UI Elements & Interactions
+
+### 5.1 Buttons
+- **Shape**: Always pill-shaped (rounded-full).
+- **Style**: Thin borders (`1px`) with bold, uppercase mono-spaced text.
+- **Hover**: Should feel "expensive." Smooth translate-up (`-0.5rem`) and deep, soft shadows.
+
+### 5.2 Cards & Containers
+- **Glassmorphism**: Use for search boxes and floating elements (`backdrop-filter: blur(10px)`).
+- **Cards**: Minimalist. Use `Slate-50` or thin `Slate-100` borders. Avoid heavy shadows unless on hover.
+
+### 5.3 Highlighters & Tags
+- **Marker Effect**: Use a hand-drawn marker underline (diagonal skew, slightly erratic rotation) for key titles.
+- **Tags**: Small, bold, uppercase. They should use `tagPopIn` animations when appearing.
+
+## 6. Motion & Atmosphere
+
+- **Reveals**: Content should never "just appear." Use slide-up and fade-in transitions (`0.5s` to `0.7s`) to create a sense of discovery.
+- **Background Grid**: A subtle, low-opacity grid pattern provides a technical "blueprint" feel to the pages.
+- **Micro-interactions**: Hovering over icons or tags should trigger subtle scales (`105%-110%`) and color shifts.
+