# Website: Design und Branding

{/* AUTO-SYNCED SOURCE: this page lives in apps/app/src/modules/website/docs/ and is mirrored into the docs app by `bun sync:module-docs`. Edit it in the module, not in apps/docs. */}

<Lead>
Vorweg die ehrliche Antwort: Im Website-Tool gibt es **keinen freien Theme-Editor**, und das ist Absicht. Die Gestaltung kommt aus deinem Workspace-Branding plus den Design-Varianten der Blöcke. So sieht deine Website immer professionell aus, auf jedem Gerät, in jedem Block, ohne dass du Farbwerte, Abstände oder Schriften pflegen musst.
</Lead>

## Woher die Gestaltung kommt

<DefinitionList>
  <DefItem term="Logo und Farben">Kommen aus dem Workspace-Branding unter **Einstellungen > Erscheinungsbild**. Änderst du dort dein Logo oder deine Markenfarben, übernimmt die Website sie automatisch. Ein separates Website-Branding gibt es nicht; deine Marke ist überall dieselbe.</DefItem>
  <DefItem term="Layout pro Block">Jeder Block bringt mehrere geprüfte **Varianten** mit (z.B. Hero als "Text und Bild", "Vollflächiges Bild" oder "Reduziert"). Die Varianten sind deine Gestaltungs-Entscheidungen; alle sind aufeinander abgestimmt.</DefItem>
  <DefItem term="Typografie und Abstände">Fest vom System gesetzt und auf Immobilien-Websites optimiert. Nicht konfigurierbar, dafür nie kaputt.</DefItem>
</DefinitionList>

## Der feste Rahmen: Navigation und Footer

Kopf- und Fußbereich sind kein frei baubarer Block, sondern der stabile Rahmen jeder Seite:

- **Navigation (Header):** Das Menü ergibt sich aus der Reihenfolge und den Nav-Schaltern unter [Seiten verwalten](/tools/website/seiten). Der Header zeigt dein Logo und kann eine Handlungs-Aufforderung (z.B. "Immobilie bewerten") sowie deine Telefonnummer enthalten. Layout-Varianten: Logo links mit Menü rechts oder zentriert.
- **Footer:** Zeigt Kontakt und Öffnungszeiten aus deinen Büro-Daten. Die Rechtslinks **Impressum**, **Datenschutz** und **Cookie-Einstellungen** sind fest verankert und nicht entfernbar (siehe [Rechtliches](/tools/website/rechtliches)). Varianten: Spalten oder kompakt.

<Info title="Warum kein freier Editor?">
Frei konfigurierbare Themes führen in der Praxis zu kaputten Layouts, unlesbaren Farbkombinationen und Wartungsaufwand. Das Website-Tool setzt stattdessen auf kuratierte Varianten mit deinem Branding: weniger Schrauben, verlässlich gutes Ergebnis.
</Info>

## Gestaltungs-Tipps

- **Akzent-Wort nutzen:** Das Feld **Akzent-Wort** im Hero hebt genau ein Wort deiner Headline typografisch hervor. Wähle das emotionale Wort ("Zuhause", "verkaufen"), nicht den Ortsnamen.
- **Überzeilen einsetzen:** Die kleine **Überzeile** über Block-Überschriften ("Leistungen", "So läuft es ab") gibt Besuchern Orientierung und lockert lange Seiten auf.
- **Varianten kombinieren:** Wechsle bei mehreren Text-und-Bild-Blöcken zwischen "Bild links" und "Bild rechts", damit die Seite Rhythmus bekommt. Ein Varianten-Wechsel verliert nie Inhalte ([Editor](/tools/website/editor)).
- **Eine Handlung pro Seite:** Genau ein Handlungs-Banner ans Seitenende (er ist ohnehin auf einmal pro Seite begrenzt) mit einer klaren Aktion.
- **Echte Bilder schlagen Stock-Fotos:** Dein Büro, dein Team, deine Objekte. Die Bild-Pipeline optimiert Uploads automatisch fürs Web.
- **Weniger ist mehr:** Der Zeichen-Zähler im Editor warnt nicht ohne Grund. Kurze Texte in klaren Blöcken verkaufen besser als Textwüsten.

## Weiterführend

Alle Varianten pro Block: [Block-Referenz](/tools/website/bloecke). Das Branding selbst pflegst du unter **Einstellungen > Erscheinungsbild** deines Workspace. Zurück zur [Website-Übersicht](/tools/website).