# Design

> Farben, Schrift, Eckenradius, Seitenbreite, Logo, Favicon und eigenes CSS der Website.

Im Reiter **Design** passt du das Aussehen der Website an. Rechts siehst du eine Beispielseite, die jede Änderung
sofort zeigt; **Speichern** veröffentlicht das neue Design.

## Vorlagen

Unter **Vorlagen** setzt ein Klick Akzentfarbe und Rundung auf einmal: *Graphit*, *Indigo*, *Smaragd*, *Rosé*,
*Bernstein* oder *Ozean*. Danach kannst du alles einzeln anpassen.

## Farben

- **Akzent (hell)** – Farbe für Buttons, Links und Hervorhebungen.
- **Akzent (dunkel, optional)** – eigene Akzentfarbe im dunklen Modus; sonst automatisch.

Die Textfarbe auf dem Akzent wählt Docsello automatisch kontrastreich.

## Schrift

Zur Wahl stehen *Inter (Standard)*, *Systemschrift*, *Humanistisch*, *Geometrisch*, *Abgerundet*, *Serif* und
*Monospace*. Alle Schriften sind selbst gehostet oder Systemschriften – die Website stellt keine Anfragen an Google
Fonts.

## Form & Layout

- **Eckenradius** der Kästen und Buttons.
- **Seitenbreite**: *Standard* oder *Volle Breite*.
- **Standard-Farbschema**: *Hell* oder *Dunkel* für Besucher, die noch nichts gewählt haben. Leser können auf der
  Website jederzeit umschalten.

## Logo & Favicon

- **Logo** – SVG oder PNG, wird ca. 28 px hoch dargestellt. Ohne Logo zeigt die Website ihren Namen.
- **Logo für dunklen Modus (optional)**.
- **Favicon** – quadratisch, mindestens 64×64 px (PNG, SVG oder ICO).

## Eigener Code

Für den Feinschliff gibt es eigenes **CSS** (wirkt sofort in der Vorschau; nutzbare Variablen sind u. a. `--accent`,
`--bg`, `--fg`, `--radius`, `--font`) und **HTML im `<head>`**, das ungeprüft auf jeder Seite eingefügt wird – z. B.
für ein Analytics-Skript oder eine Verifizierung. Das HTML erscheint nicht in der Vorschau.

:::warning
HTML im `<head>` und das Modul *Eigenes HTML* werden ungeprüft ausgeliefert. Füge nur Code aus vertrauenswürdigen
Quellen ein.
:::