# Anmeldeseiten mit Branding gestalten

Das Branding verändert das Aussehen der gehosteten Anmeldung, des Kontoportals und der E-Mails. Die Einstellungen werden in dieser Reihenfolge übernommen: Plattform-Standard, Umgebung, Anwendung, Organisation. Jedes Token übernimmt den Wert von der spezifischsten Ebene, die es definiert.

## Was Sie festlegen können

- Farben: `color.primary`, `color.primary_contrast`, `color.background`, `color.surface`, `color.text`, `color.text_muted`, `color.border`, `color.link`, `color.focus_ring`, `color.error` und `color.success`, als sRGB-Hex-Werte. Hell und Dunkel haben getrennte Werte, und `mode` ist `light`, `dark` oder `system`.
- Schriften: `font.body` und `font.heading` aus der erlaubten Schriftliste oder eine hochgeladene Schrift; `font.size_base` von 14 bis 18 px.
- Form: `radius.card` von 0 bis 24 px und `radius.control` von 0 bis 16 px.
- Layout: `center`, `split_left` oder `split_right`.
- Bilder: `logo`, `logo_height` (24 bis 80 px), `favicon` und `background_image` (nur mit einem `split_*`-Layout).

Organisationen können nur die Token `logo` und `color.primary` überschreiben. Das Branding einer Organisation wird nur angezeigt, wenn der Organisationskontext verifiziert ist, zum Beispiel durch eine gültige Einladung oder nach der Organisationsauswahl. Ein bloßer `organization`-Parameter ändert das Aussehen der Seite nicht.

## Kontrastschutz

Beim Speichern prüft KeenAuth diese Paare, jeweils getrennt für Hell und Dunkel:

| Paar | Mindestverhältnis |
|---|---|
| Text auf Hintergrund | 4,5:1 |
| `color.link` auf Hintergrund | 4,5:1 |
| `color.primary_contrast` auf `color.primary` | 4,5:1 |
| Rahmen der Steuerelemente auf Hintergrund | 3:1 |
| Fokusring (`color.focus_ring`) auf Hintergrund | 3:1 |

Ein Paar unterhalb seines Mindestwerts wird von der Management API mit `422 brand_contrast_insufficient` (RFC 9457) abgelehnt. Der Fehlerkörper nennt das Feld und schlägt die nächstliegende Farbe vor, die die Prüfung besteht; der Vorschlag behält Farbton und Chroma bei und verändert nur die Helligkeit. Das Dashboard bietet denselben Vorschlag mit einem Klick an. Ein fehlerhafter Wert kann nicht veröffentlicht werden. Das Format des Fehlers finden Sie unter [Branding veröffentlichen](/docs/api/management/branding/publish).

Eigenes CSS (Startup-Tarif) kann den Kontrast verringern, und KeenAuth korrigiert dies nicht. Eine Vorschauprüfung meldet Probleme als Warnungen im Dashboard; die Konformität von Änderungen mit eigenem CSS liegt in Ihrer Verantwortung.

## Assets

Bilder und Schriften laden Sie mit `POST /v1/branding/assets` hoch. Bilder dürfen höchstens 1 MB groß sein, Schriften höchstens 300 KB. Akzeptiert werden PNG, JPEG und WebP, ICO nur für Favicons und WOFF2 nur für Schriften. SVG wird abgelehnt. Bilder werden als PNG neu kodiert, auf höchstens 1024×1024 px verkleinert und von Metadaten bereinigt. Eine Umgebung kann 200 Dateien und 50 MB enthalten.

## Eigenes CSS und Vorlagen

Ab dem Startup-Tarif können Sie eigenes CSS und eine Seitenvorlage hinzufügen. Die sicherheitskritischen Teile einer Seite werden in einer geschützten Ebene dargestellt, die Ihr CSS nicht verbergen oder überdecken kann: den Anwendungsnamen und die verifizierte Herkunft auf Zustimmungsbildschirmen, die Liste der angefragten Berechtigungen, die Schaltflächen zum Erlauben und Ablehnen, Sicherheitswarnungen, den Umgebungshinweis und die rechtlichen Links. Kundenseitiges JavaScript wird in keinem Tarif ausgeführt.

Verwenden Sie logische CSS-Eigenschaften (`margin-inline-start`, nicht `margin-left`); physische Eigenschaften werden abgelehnt, damit Ihre Stile auch in Sprachen mit Schreibrichtung von rechts nach links funktionieren. Siehe [Sprachen und Schreibrichtung von rechts nach links](/docs/guides/localization).

## KeenAuth-Kennzeichnung

Die gehostete Anmeldung, das Kontoportal und die E-Mails zeigen in der geschützten Ebene eine kleine Zeile „Secured by KeenAuth“. In den Tarifen Business und Enterprise sowie in Umgebungen vom Typ `development` wird sie nicht angezeigt. Der Tarif wird bei jeder Darstellung einer Seite oder E-Mail geprüft, sodass die Zeile wieder erscheint, wenn sich der Tarif ändert. Eigenes CSS und Textüberschreibungen können sie weder verbergen noch verändern.

## Veröffentlichen

Änderungen werden als Entwurf gespeichert und gehen mit der Veröffentlichung live. Frühere Versionen können Sie auflisten und zurücksetzen. Die API-Seiten befinden sich unter `/docs/api/management/branding/`, beginnend mit [Branding veröffentlichen](/docs/api/management/branding/publish).