@AGENTS.md

## Sub-Dokumentation

Jeder Ordner hat eine eigene CLAUDE.md als Single Source of Truth:

| Bereich | Dok |
|---------|-----|
| Convex Backend | [convex/CLAUDE.md](convex/CLAUDE.md) |
| Canvas-Engine | [components/canvas/CLAUDE.md](components/canvas/CLAUDE.md) |
| Design System (ShadCN) | [components/ui/CLAUDE.md](components/ui/CLAUDE.md) |
| Billing & Credits UI | [components/billing/CLAUDE.md](components/billing/CLAUDE.md) |
| Dashboard | [components/dashboard/CLAUDE.md](components/dashboard/CLAUDE.md) |
| Next.js Routing | [app/CLAUDE.md](app/CLAUDE.md) |
| Utilities & Shared Logic | [lib/CLAUDE.md](lib/CLAUDE.md) |
| Custom Hooks | [hooks/CLAUDE.md](hooks/CLAUDE.md) |

---

## Auth-Status (Kurzüberblick)

- Better Auth ist aktiv (Convex-Integration).
- Login unterstützt:
  - E-Mail + Passwort
  - Magic Link (Better-Auth Plugin)
- Details und Caveats (inkl. `SITE_URL`/`APP_URL`-Origin-Thema) stehen in:
  - `convex/CLAUDE.md`
  - `app/CLAUDE.md`

---

## Design Context

### Users
Kleine Design- und Marketing-Teams (2–10 Personen), die aus wenigen Input-Assets schnell kampagnenfähige Bildvarianten erzeugen. Sie arbeiten unter Zeitdruck, brauchen Überblick über Credits und laufende Generierungen, und wollen sich auf die kreative Arbeit konzentrieren — nicht auf das Tool.

### Brand Personality
Frisch, klar, einladend. Wie eine Zitrone: hell, sauber, natürlich. Vertrauen durch Klarheit, nicht durch Komplexität. Drei Worte: **frisch · klar · menschlich**.

### Aesthetic Direction
- **Tone**: Warm & Organic — weiche Formen, warme Töne, einladend und menschlich
- **Light/Dark**: Beides (system auto), aber Light als primäre Designrichtung
- **Colors**: Teal-Primary mit warmen Neutraltönen (beige/sand statt kaltem Grau). Zitronengelb als Akzent.
- **Anti-references**: Kalte Dashboard-Ästhetik, Glassmorphism, Neon-auf-Dunkel, generische SaaS-Templates
- **References**: Notion (Klarheit), Linear (Präzision), Craft (Wärme), Things (Menschlichkeit)

### Design Principles
1. **Klarheit vor Dekoration** — Jedes Element muss einen Zweck erfüllen. Keine schmückenden Karten oder Sparklines.
2. **Warme Neutralität** — Neutraltöne immer Richtung Warm (Sand/Beige) tönen, niemals kaltes Grau.
3. **Asymmetrische Balance** — Nicht alles zentrieren. Linksbündiger Text, variierte Abstände, bewusste visuelle Hierarchie.
4. **Progressive Disclosure** — Wichtigstes zuerst, Details bei Bedarf. Nicht alles gleichzeitig zeigen.
5. **Natürliches Tempo** — Sanfte Übergänge mit exponentiellem Easing. Bewegung soll sich organisch anfühlen.