# 1satz Brand — Integration

**Grundregel: REFERENZIEREN, NICHT KOPIEREN.** Eine Quelle (`brand.1satz.ch`), alle binden sie ein.
Hex-Codes oder Logos kopieren = Drift. Genau das vermeiden wir.

---

## 1. Web-App / Webseite  ✅ referenzieren

```html
<!-- im <head> -->
<link rel="stylesheet" href="https://brand.1satz.ch/tokens.css">
<link rel="icon" href="https://brand.1satz.ch/logo/favicon.svg">

<!-- Farbe NUR über Variablen -->
<style>
  .btn { background: var(--brand-teal); font-family: var(--brand-font); }
</style>

<!-- Logo per URL (nie herunterladen/einbetten) -->
<img src="https://brand.1satz.ch/logo/full-teal.svg"  alt="1satz AG" height="32">   <!-- heller Grund -->
<img src="https://brand.1satz.ch/logo/full-white.svg" alt="1satz AG" height="32">   <!-- dunkler Grund -->
```

## 2. E-Mail (HTML)  ⚠️ kopieren erzwungen — Mail-Clients sperren externes CSS/SVG

```html
<!-- Farbe inline als Hex (Variablen gehen nicht in Mail) -->
<td style="background:#007A7A;color:#ffffff;font-family:'Plus Jakarta Sans',Arial,sans-serif;">…</td>

<!-- Logo als gehostetes PNG (kein SVG in Mail) -->
<img src="https://brand.1satz.ch/logo/email.png" alt="1satz AG" width="160" style="display:block;">
```

## 3. Standalone-/Publish-HTML (Cyon, Präsentation, Report)  ⚠️ teils kopieren

- Wenn die Seite `brand.1satz.ch` erreichen kann → wie (1) per `<link>`/`<img>`.
- Wenn vollständig self-contained sein muss → Tokens-Block aus `tokens.css` einmal in den `<style>` kopieren
  und Logo-SVG inline einbetten (Dateien in `/logo/*.svg`, Text ist bereits in Pfade umgewandelt → bricht nie).

---

## Asset-URLs (stabil)

| Zweck | URL |
|---|---|
| Farb-/Font-Tokens (CSS) | `https://brand.1satz.ch/tokens.css` |
| Tokens maschinenlesbar | `https://brand.1satz.ch/tokens.json` |
| Logo voll (hell/dunkel/sw) | `/logo/full-teal.svg` · `/logo/full-white.svg` · `/logo/full-black.svg` |
| Nur Icon | `/logo/mark-{teal,white,black}.svg` |
| Wortmarke | `/logo/wordmark-{teal,white,black}.svg` |
| Jede Variante auch als hi-res PNG, transparent | gleiche Namen mit `.png` |
| E-Mail-Logo | `/logo/email.png` |
| Favicon | `/logo/favicon.svg` · `/logo/favicon.ico` |
| App-Icon | `/logo/apple-touch-icon.png` |

**Varianten-Logik:** `teal` = auf hellem Grund · `white` = auf dunklem Grund · `black` = einfarbig/Druck.
Alle SVG/PNG haben **transparenten Hintergrund**; PNGs sind hochauflösend (~700px Höhe).

## Farben

| Token | Hex | Einsatz |
|---|---|---|
| `--brand-teal` | `#007A7A` | Primär: Logo, Buttons, Akzente |
| `--brand-teal-light` | `#4da8a8` | Sekundär auf Teal |
| `--brand-tint` | `#e6f2f2` | Flächen, Badges |
| `--brand-ink` | `#1a1a1a` | Text |
| `--brand-gray` | `#5c5c5c` | Sekundär auf dunkel |
| `--brand-gray-light` | `#adadad` | Sekundär auf hell |

Schrift: **Plus Jakarta Sans** (400/500/600/700/800).
