# Craftvia — Branding in der Anwendung

Maßgeblich ist das Brandbook: [BRANDBOOK.md](BRANDBOOK.md) (§11.4 Farben, §11.5 Typografie).
Referenzbild: [assets/craftvia-brand-identity-v1.png](assets/craftvia-brand-identity-v1.png).
Dieses Dokument beschreibt, **wo** die Marke im Code verankert ist.

## Quellen der Wahrheit

| Was | Datei |
|---|---|
| CSS-Tokens (Browser) | `src/app/globals.css` — `--brand-*` (Kernfarben), `--ui-*` (UI-Rollen), shadcn-Tokens abgeleitet |
| JS-Konstanten (Metadaten, Mail, Dokumente) | `src/lib/brand.ts` — `BRAND`, `BRAND_COLORS`, `STATUS_COLORS`, `BRAND_FONTS` |
| Logo (Inline-SVG) | `src/components/brand/craftvia-logo.tsx` |
| Mandanten-Logo-Override | `src/components/brand/tenant-brand.tsx` + `resolveTenantBranding()` |
| E-Mail-Layout | `src/lib/email-brand.ts` |
| Dokument-/Druck-CD | `src/lib/document-brand.ts`, `@media print` in `globals.css` |
| Favicon/PWA-Icons | `scripts/generate-brand-icons.ts` → `public/favicon/*`, `public/favicon.ico` |
| Manifest | `public/site.webmanifest` (`theme_color` #082E5B) |

## Farben

| Rolle | Name | Hex | Token |
|---|---|---|---|
| Primär | Lotsenblau | `#082E5B` | `--brand-lotsenblau` → `--primary` |
| Akzent/CTA | Signalorange | `#FF6A00` | `--brand-signalorange` → `--ui-accent` (`bg-cta`) |
| Text | Graphit | `#34383D` | `--foreground` |
| Fläche | Hafengrau | `#F3F5F7` | `--background` |
| Sekundärtext | Stahlgrau | `#66727D` | `--muted-foreground` |
| Linien | Zink | `#D9E0E5` | `--border`, `--input` |
| Erfolg / Warnung / Fehler / Info | | `#23845D` / `#C87912` / `#C64242` / `#2F6FA3` | `--ok` / `--warn` / `--risk` / `--info` |

Regeln: Signalorange sparsam (eine Hauptaktion je Ansicht, aktive Elemente). Farbe nie
als einziges Statussignal — immer mit Text oder Icon. Keine Verläufe, keine Schlagschatten
(`--shadow-card` ist eine feine Kontur); die Utility-Namen `bg-grad*` zeigen Vollfarbe.

## Logo

`<CraftviaLogo />` — Props:

- `variant`: `"horizontal"` (Signet + Wortmarke, Default) | `"signet"`
- `tone`: `"color"` (Default) | `"mono"` (einfarbig Lotsenblau) | `"reversed"` (weiß, für dunkle Flächen)
- `tile` (nur Signet): App-Icon-Kachel in Lotsenblau mit weißem C und orangem Haken
- `tagline`: „Handwerk. Digital auf Kurs." unter der Wortmarke
- `height`: Renderhöhe in px

Konstruktion (viewBox 64×64, exportiert als `SIGNET`): kräftiges C (Kreisbogen r=19,
Strichstärke 11) mit Öffnung rechts oben; oranger Haken startet links außerhalb, durchquert
das C (dort per Maske freigestellt) und endet als Pfeil nach rechts oben. Wortmarke
„Craft" Lotsenblau + „via" Signalorange, Gewicht 800.

Nach Änderungen an der Geometrie Icons neu erzeugen:

```bash
npx tsx scripts/generate-brand-icons.ts
```

## Typografie

Inter (Brandbook §11.5), selbst gehostet über `next/font/local`
(`src/app/fonts/inter-variable.ttf`, SIL Open Font License) — kein Laden aus dem Netz.
TODO: auf woff2-Subsets umstellen (Dateigröße).

## Produktidentität

- Name: **Craftvia**, Tagline: **Handwerk. Digital auf Kurs.**
- In-Product-Assistent: **Lotse** (eigene Figur, getrennt vom Logo; Modul `lotse`)
- TOTP-Issuer: `Craftvia · Plattform` (`src/server/mfa.ts`), WebAuthn-RP-Name: `Craftvia`
- Mail-Absender-Default: `MAIL_FROM_NAME` → `Craftvia`