simonabler · simonabler · Mar 15, 2026 · Mar 15, 2026 · Mar 15, 2026 · Mar 17, 2026
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(grep -i article find apps/server/src -name \"*.controller.ts\")"
+    ]
+  }
+}
diff --git a/.claude/skills/abler-design/SKILL.md b/.claude/skills/abler-design/SKILL.md
@@ -0,0 +1,139 @@
+---
+name: abler-design
+description: >
+  Design- und Entwicklungs-Skill für das abler.tirol Ökosystem.
+  Verwende diesen Skill immer wenn du für Simon Abler eine neue Seite,
+  Komponente, Frontend, Landing Page oder UI-Element unter einer der
+  abler.tirol Subdomains erstellst oder bearbeitest — also für
+  abler.tirol, api.abler.tirol, barcode.abler.tirol, pdf.abler.tirol,
+  klara.abler.tirol, sims.abler.tirol oder jede neue *.abler.tirol Domain.
+  Auch beim Erstellen neuer Subdomains, beim Anpassen von Docker/nginx-Configs,
+  beim Schreiben von READMEs für abler.tirol Repos, oder wenn das Gespräch
+  Designentscheidungen für dieses Ökosystem betrifft. Trigger auch bei
+  Fragen wie "wie soll X bei abler.tirol aussehen" oder "erstelle mir
+  eine Seite im abler-Stil".
+---
+
+# abler.tirol — Design & Development Skill
+
+Dieses Skill definiert das vollständige Design-System und die Entwicklungsregeln
+für das `abler.tirol` Ökosystem. Es gilt für alle bestehenden und neuen Produkte.
+
+---
+
+## Schritt 1: Subdomain identifizieren
+
+Bevor du anfängst, stelle fest für welche Subdomain du arbeitest.
+Lies dann die entsprechende Referenzdatei:
+
+| Subdomain | Referenzdatei | Produkt-Typ |
+|---|---|---|
+| `abler.tirol` | `references/abler-tirol.md` | Landing / Static |
+| `api.abler.tirol` | `references/api.md` | API + Minimal-Frontend |
+| `barcode.abler.tirol` | `references/barcode.md` | Pure Frontend |
+| `pdf.abler.tirol` | `references/pdf.md` | Pure Frontend |
+| `klara.abler.tirol` | `references/klara.md` | Fullstack |
+| `sims.abler.tirol` | `references/sims.md` | Fullstack |
+| Neue Subdomain | `references/new-product.md` | Checkliste |
+
+**Neue Subdomain?** → Lies `references/new-product.md` für die Checkliste.
+
+---
+
+## Schritt 2: Universelle Regeln (gelten für ALLE Subdomains)
+
+### Typografie — unveränderlich
+
+```html
+<!-- IMMER über api.abler.tirol — nie Google Fonts -->
+<link rel="preconnect" href="https://api.abler.tirol" />
+<link rel="stylesheet" href="https://api.abler.tirol/fonts/abler-stack.css" />
+```
+
+| Rolle | Font | Verwendung |
+|---|---|---|
+| Headlines | `DM Serif Display` | Hero-Titel, H1/H2 |
+| Body / UI | `Inter` | Fließtext, Labels |
+| Code / Mono | `DM Mono` | Tags, Badges, Code, Terminal |
+
+```css
+--text-display: clamp(3rem, 8vw, 6rem);
+--text-h1:      clamp(2.2rem, 5vw, 3.75rem);
+--text-h2:      clamp(1.8rem, 3.5vw, 3rem);
+--text-body:    0.95rem;
+--text-label:   0.72rem; /* DM Mono + uppercase + letter-spacing: 0.18em */
+```
+
+### Geteilte Neutrals
+
+```css
+:root {
+  --white:      #ffffff;
+  --bg-light:   #f7f7f4;
+  --bg-subtle:  #fbfbf9;
+  --ink:        #0f172a;
+  --ink-2:      #475569;
+  --ink-3:      #94a3b8;
+  --border:     #e2e8f0;
+  --border-sub: rgba(226,232,240,0.7);
+  --radius-xl:  2rem;
+  --radius-lg:  1.5rem;
+  --shadow-card: 0 25px 80px -30px rgba(15,23,42,0.18);
+  --shadow-sm:   0 1px 3px rgba(15,23,42,0.06);
+  --sans:  'Inter', sans-serif;
+  --mono:  'DM Mono', monospace;
+  --serif: 'DM Serif Display', serif;
+}
+```
+
+### Layout
+
+- Max-Width: `72rem` · Section-Padding: `5rem` Desktop / `3rem` Mobile
+- Seitenabstand: `1.5rem` Mobile · `2.5rem` Tablet+
+
+### Komponenten
+
+Buttons immer Pill-Form (`border-radius: 999px`), nie eckig.
+Cards hover: `transform: translateY(-4px)` + Shadow.
+Tags: `DM Mono`, `border-radius: 999px`.
+Nav: sticky, max. 4–5 Einträge, Logo in `DM Mono uppercase`.
+
+### Animationen
+
+```css
+@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
+/* Stagger: 0.05s–0.15s · max duration: 0.7s · kein Parallax, kein Bounce */
+```
+
+### Zweisprachigkeit DE/EN
+
+```html
+<body class="de">
+<p data-lang="de">Text</p>  <p data-lang="en">Text</p>
+```
+```css
+[data-lang], span[data-lang] { display: none !important; }
+body.de [data-lang="de"], body.de span[data-lang="de"] { display: revert !important; }
+body.en [data-lang="en"], body.en span[data-lang="en"] { display: revert !important; }
+body.de span[data-lang="de"], body.en span[data-lang="en"] { display: inline !important; }
+```
+
+### Docker / Traefik
+
+Pure Frontend → `nginx:alpine`. Jede Domain bekommt einen **eigenen Traefik-Router**
+(separates TLS-Zertifikat pro Domain, nie mehrere Domains in einem Router).
+
+---
+
+## Schritt 3: Subdomain-Referenz lesen
+
+Lies jetzt die passende Datei aus `references/` für Farben, Charakter
+und subdomain-spezifische Eigenheiten.
+
+---
+
+## Verbotsliste (alle Subdomains)
+
+❌ Fonts von Google · ❌ Lila/Violette Gradienten · ❌ System-Fonts
+❌ Eckige Buttons · ❌ `#000` als Textfarbe · ❌ >2 Akzentfarben gleichzeitig
+❌ Hardcodierte Farbwerte · ❌ Überfüllte Nav · ❌ Parallax / Bounce
diff --git a/.claude/skills/abler-design/references/abler-tirol.md b/.claude/skills/abler-design/references/abler-tirol.md
@@ -0,0 +1,51 @@
+# abler.tirol — Landing Page
+
+## Charakter
+Sachlich, übergeordnet, verbindend. Der Anker des Ökosystems.
+Kein starker Farbakzent — die Subdomains bringen Farbe.
+
+## Akzentfarben
+```css
+--accent-primary:   #0f172a;   /* Slate 900 */
+--accent-secondary: #334155;   /* Slate 700 */
+```
+
+## Produkttyp: Landing / Static
+- Reines HTML/CSS/JS — kein Framework, kein Build-Step
+- Kein eigenes Backend, kein API-Zugriff
+- Docker: `nginx:alpine` mit `index.html`
+
+## Hero-Stil
+Hell (`--bg-light`), Dashboard-Widget rechts, fadeUp-Animationen.
+Kein Dark Hero — neutrales Intro das alle Produkte zusammenhält.
+
+## Typografie-Gewicht
+Ausgewogen. `DM Serif Display` italic für einzelne Wort-Akzente im Hero-Titel.
+`Inter` für Body. `DM Mono` für Labels und Nav-Logo.
+
+## Besonderheiten
+- Zeigt alle aktiven Produkte als Cards im 2-Spalten-Grid
+- 5. oder weitere Cards: `card-wide` (full-width, horizontal Layout Desktop)
+- Hero-Widget zeigt Anzahl aktiver Produkte + Status-Zeilen
+- Nav-Badges verlinken direkt zu den Subdomains
+- Sprach-Toggle DE/EN oben rechts
+
+## Card-Farben pro Produkt
+```css
+/* api */      linear-gradient(135deg, #0f172a, #334155)
+/* klara */    linear-gradient(135deg, #064e3b, #065f46)
+/* barcode */  linear-gradient(135deg, #78350f, #92400e)
+/* pdf */      linear-gradient(135deg, #1e1b4b, #312e81)
+/* sims */     linear-gradient(135deg, #134e4a, #0f3d3a)
+/* daedalus */ linear-gradient(135deg, #1a1a2e, #16213e)
+```
+
+## Repo
+`github.com/simonabler/abler-tirol`
+
+## Neue Produkte hinzufügen
+1. CSS-Variable `--<name>-from` / `--<name>-to` in `:root` ergänzen
+2. `.card-top-<name>` CSS-Klasse mit Gradient anlegen
+3. Card-HTML im Products-Grid einfügen
+4. Widget-Zähler erhöhen, Widget-Row ergänzen
+5. Nav-Badge optional hinzufügen
diff --git a/.claude/skills/abler-design/references/api.md b/.claude/skills/abler-design/references/api.md
@@ -0,0 +1,68 @@
+# api.abler.tirol — Zentrale REST-API
+
+## Charakter
+Technisch, präzise, terminal-nah. `DM Mono` dominiert sichtbarer als
+bei anderen Produkten. Dark Hero mit Terminal-Widget. Developer-First.
+
+## Akzentfarben
+```css
+--accent-primary:   #0f172a;   /* Slate 900 */
+--accent-secondary: #1e3a5f;   /* Deep Blue-Slate */
+--accent-highlight: #5bffc3;   /* Terminal Green — Cursor, Live-Indikatoren */
+--accent-code:      #3b8fff;   /* Code Blue — Syntax-Highlighting */
+--bg-dark:          #0b0d11;   /* Hero / Terminal backgrounds */
+```
+
+## Produkttyp: API + Minimal-Frontend
+- NestJS Backend (Port 3000)
+- Angular Frontend (Port 80)
+- Eigene Datenbank (SQLite / PostgreSQL)
+- CORS: `*` — öffentlich nutzbar
+- Fonts werden hier **gehostet** und an alle anderen Subdomains ausgeliefert
+
+## Font-Server Endpunkte
+```
+GET /fonts/abler-stack.css        → kombiniertes @font-face CSS
+GET /fonts/files/:filename        → individuelle woff2-Dateien
+```
+Font-Dateien liegen in `apps/server/src/assets/fonts/files/` (woff2 aus `@fontsource`).
+NestJS GlobalPrefix ist `api` — `/fonts/*` ist davon **ausgenommen** (`exclude: ['fonts/(.*)']`).
+
+## Hero-Stil
+Dark Hero (`--bg-dark`) mit Grid-Overlay, Glow-Effekten und Terminal-Widget.
+Terminal zeigt Live-Curl-Beispiele mit animiertem Cursor (`blink 1.1s step-end`).
+
+## Typografie-Gewicht
+Mono-lastig. `DM Mono` für Labels, Badges, Terminal, alle technischen Texte.
+`DM Serif Display` wird hier nicht oder sehr sparsam eingesetzt.
+
+## Swagger / API Docs
+Swagger UI unter `/api` — beide Domains als Server eingetragen:
+```ts
+.addServer('https://api.abler.tirol')
+.addServer('https://hub.abler.tirol')  // Legacy, bleibt aktiv
+```
+
+## Traefik — beide Domains, getrennte Router
+```yaml
+# Frontend: hub + api → selber Service, 2 Router für 2 Zertifikate
+hub-frontend:  Host(`hub.abler.tirol`) && PathPrefix(`/`)
+api-frontend:  Host(`api.abler.tirol`) && PathPrefix(`/`)
+# Backend: /api/* und /fonts/* → NestJS
+hub-backend:   Host(`hub.abler.tirol`) && (PathPrefix(`/api`) || PathPrefix(`/fonts`))
+api-backend:   Host(`api.abler.tirol`) && (PathPrefix(`/api`) || PathPrefix(`/fonts`))
+```
+
+## Repo
+`github.com/simonabler/simonapi` (NX Monorepo: `apps/server` + `apps/simonapi`)
+
+## API-Endpunkte (Übersicht)
+`/api/qr` · `/api/barcode` · `/api/barcode/gs1` · `/api/crypto`
+`/api/watermark` · `/api/signpacks` · `/api/utils` · `/api/locks`
+`/fonts/abler-stack.css` · `/fonts/files/:filename`
+
+## Besonderheiten beim Entwickeln
+- Neue Endpunkte: eigenes NestJS Module in `apps/server/src/app/<name>/`
+- Font-Assets: woff2 aus `@fontsource` in `apps/server/src/assets/fonts/files/`
+- Webpack kopiert `src/assets/` automatisch nach `dist/`
+- API-Keys: 3 Tiers — Free (10/min), Pro (`sk_pro_`), Industrial (`sk_ind_`)
diff --git a/.claude/skills/abler-design/references/barcode.md b/.claude/skills/abler-design/references/barcode.md
@@ -0,0 +1,58 @@
+# barcode.abler.tirol — Barcode & QR Generator
+
+## Charakter
+Industriell, präzise, physisch-nah. Erinnert an Etiketten, Scanner,
+Lagerlogistik. Helles Layout mit Amber-Akzenten.
+Primäre Zielgruppe: Logistik, Handel, Produktion — keine Developer.
+
+## Akzentfarben
+```css
+--accent-primary:   #78350f;   /* Amber 900 */
+--accent-secondary: #92400e;   /* Amber 800 */
+--accent-highlight: #f59e0b;   /* Amber 500 — aktive Zustände, Scan-Indikator */
+--accent-light:     #fef3c7;   /* Amber 100 — subtile Hintergründe */
+```
+
+## Produkttyp: Pure Frontend
+- Reines HTML/CSS/JS oder Angular SPA
+- **Kein eigenes Backend** — alle Daten via `fetch()` von `api.abler.tirol`
+- Docker: `nginx:alpine`
+- Fonts: `api.abler.tirol/fonts/abler-stack.css`
+
+## API-Aufrufe (Beispiele)
+```js
+// QR Code generieren
+const res = await fetch('https://api.abler.tirol/api/qr', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({ type: 'url', payload: { url: input }, format: 'svg' })
+});
+
+// Standard Barcode
+const url = `https://api.abler.tirol/api/barcode/svg?type=code128&text=${encodeURIComponent(input)}&includetext=true`;
+
+// GS1 (benötigt API-Key für Pro-Endpunkte)
+const res = await fetch('https://api.abler.tirol/api/barcode/gs1/render', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json', 'x-api-key': key },
+  body: JSON.stringify({ symbology: 'gs1-128', format: 'png', items: [...] })
+});
+```
+
+## Hero-Stil
+Hell (`--bg-light`), Amber-Akzente. Generator-UI im Vordergrund —
+kein langer Marketing-Text, direkt zum Tool.
+
+## Typografie-Gewicht
+`DM Serif Display` + `Inter`. Kein Terminal-Look.
+Eyebrows und Tags in `DM Mono`.
+
+## UI-Besonderheiten
+- Generator steht sofort im Viewport — kein Scroll nötig
+- Live-Preview des Barcodes während der Eingabe (debounced, ~300ms)
+- Download-Button für PNG/SVG direkt neben der Vorschau
+- Amber-Akzent als Scan-Linie / aktiver Rahmen bei der Preview
+- Typ-Auswahl: QR / Code128 / EAN / GS1 als Pill-Tabs
+
+## Repo
+`github.com/simonabler/barcode-abler-tirol`
diff --git a/.claude/skills/abler-design/references/klara.md b/.claude/skills/abler-design/references/klara.md
@@ -0,0 +1,48 @@
+# klara.abler.tirol — Dokumentationstool für Lehrkräfte
+
+## Charakter
+Ruhig, warm, menschlich. Betont Vertrauen und Datenschutz.
+Helles Layout, viel Weißraum, Serif-Titel (kursiv).
+Wenig technischer Jargon — spricht Lehrkräfte an, nicht Developer.
+
+## Akzentfarben
+```css
+--accent-primary:   #064e3b;   /* Emerald 900 */
+--accent-secondary: #065f46;   /* Emerald 800 */
+--accent-highlight: #10b981;   /* Emerald 500 — aktive Elemente, Icons */
+--accent-light:     #ecfdf5;   /* Emerald 50 — subtile Hintergründe */
+```
+
+## Produkttyp: Fullstack (eigenständig)
+- **Eigenes NestJS Backend** + PostgreSQL/SQLite
+- **Eigene Authentifizierung** (Google OAuth + JWT)
+- Kein Zugriff auf `api.abler.tirol` — vollständig unabhängig
+- Self-Hosted: Nutzer betreiben eigene Instanz
+- Fonts: `api.abler.tirol/fonts/abler-stack.css`
+
+## Hero-Stil
+Sehr hell, viel Weißraum. `DM Serif Display` italic dominant im Titel
+("Dokumentation, die *endlich* mitdenkt.").
+Kein Dark Hero, kein Terminal-Widget.
+
+## Typografie-Gewicht
+Serif-dominant. `DM Serif Display` italic für Haupttitel.
+`Inter` light (300) für Fließtext — ruhig, lesbar.
+`DM Mono` nur für technische Labels (DSGVO-Badges, Status).
+
+## DSGVO / Datenschutz
+Klara ist DSGVO-konform by design — das ist ein Kernelement des Brandings:
+- "Self-hosted" Badge prominent
+- "Keine Daten bei Drittanbietern"
+- "Open Source — jede Zeile Code öffentlich"
+Datenschutz-Section ist Pflichtbestandteil jeder Seite.
+
+## UI-Besonderheiten
+- App-Interface: Angular, Bootstrap 5
+- Schülerprofile, Notizen, Leistungen als separate Bereiche
+- Keine komplexen Mega-Menüs — Reduktion ist Kernwert
+- Testimonials von Lehrkräften auf der Landing Page
+- CTA: "Klara jetzt ausprobieren →" + "Selbst hosten"
+
+## Repo
+`github.com/simonabler/Klara`