Design-Tokens

Design-Tokens sind die zentralen Stellschrauben fuer das Erscheinungsbild deiner Website. Farben, Schriften, Abstaende, Border-Radius, Breakpoints — alles liegt in einem LESS-Stylesheet, das zu CSS kompiliert und ueberall im oeffentlichen Auftritt angewendet wird.

Diese Seite zeigt dir, wie du den Editor oeffnest, Tokens aenderst, das Ergebnis pruefst und speicherst.

Wo das Modul liegt

Klicke Settings → Design in der Sidebar. Der CodeMirror-LESS-Editor oeffnet sich mit dem aktuellen Stylesheet aus der Datenbank.

Der Editor zeigt die komplette custom.less. Die Variablen oben steuern das gesamte Design.

Was im Stylesheet steht

Der obere Teil der Datei ist eine flache Liste von LESS-Variablen, gruppiert nach Zweck. Darunter stellt der :root { ... }-Block dieselben Werte als CSS Custom Properties bereit — so kannst du die Tokens auch aus Widget-CSS zur Laufzeit nutzen.

Alles darunter ist normales CSS. Du darfst es bearbeiten, aber die Tokens oben sind der Ort fuer die meisten Aenderungen — sie wirken sich auf das ganze Design aus.

Farben

Token	Zweck
@colorPrimary	Buttons, Links, Akzente. Die dominante Markenfarbe.
@colorPrimaryHover	Hover-Status fuer Buttons. Meist eine abgedunkelte Primary-Farbe.
@colorDanger	Fehler, Loeschen-Aktionen.
@colorSuccess	Erfolgsmeldungen.
@colorWarning	Warnungen, dezente Hinweise.
@colorText	Fliesstext.
@colorTextLight	Sekundaerer Text, Borders, Input-Outlines.
@colorBackground	Seiten-Hintergrund.
@colorBorder	Input-Borders, Trennlinien.
@colorLink	Textlinks (alternativ zur Primary).
@colorError	Error-Input-Border.

Typografie

Token	Zweck
@fontBody	Haupt-Font-Stack fuer Fliesstext.
@fontIcon	Icon-Schrift (standardmaessig Font Awesome).
@fontSizeBase	Basis-Schriftgroesse (Default 14px).
@fontSizeSmall	Kleiner Text, Captions, Labels.
@fontWeightLight / @fontWeightRegular / @fontWeightMedium	Gewichte, die ueberall im Design verwendet werden.
@lineHeightBase	Basis-Zeilenhoehe.

Abstaende

Token	Zweck
@spacingBase	Einheit fuer feine Anpassungen (8px).
@spacingSmall / @spacingMedium / @spacingLarge / @spacingXLarge	Gestaffelte Paddings und Margins.
@spacingSection	Vertikaler Abstand zwischen Pagebuilder-Rows (.ns-row).
@spacingForm	Abstand zwischen Form-Groups.

Layout und Schatten

Token	Zweck
@radiusBase	Abrundungsradius fuer Buttons, Inputs, Cards.
@radiusRound	Pillenfoermige Elemente.
@inputHeight	Hoehe von Formularfeldern.
@buttonLineHeight	Line-Height fuer .btn.
@shadowCard	Card- / Nav-Dropshadow.

Breakpoints

Token	Zweck
@breakpointDesktop	Unter dieser Breite greifen Desktop-Regeln nicht mehr (Default 991px).
@breakpointMobile	Unter dieser Breite gelten Mobile-Regeln (Default 768px).

Token aendern

1. Oeffne Settings → Design.
2. Suche die Variable oben in der Datei (z. B. @colorPrimary).
3. Aendere den Wert. Du kannst jeden gueltigen LESS-Wert nehmen — Hex, rgb(), rgba(), LESS-Helper wie darken(#0368DB, 8%).
4. Klicke Save & Compile oben rechts.

Save & Compile schreibt das LESS in die Datenbank und triggert einen CSS-Rebuild.

Das Frontend uebernimmt das neue CSS beim naechsten Seitenaufruf — kein Deployment, kein Nuxt-Build noetig.

Vorschau vor dem Speichern

Aenderungen werden erst nach Save & Compile angewendet. Oeffne die oeffentliche Seite in einem zweiten Browser-Tab und lade sie nach dem Speichern neu, um das Ergebnis zu sehen.

Auf Default zuruecksetzen

Wenn du eine ganze Sitzung an Aenderungen rueckgaengig machen willst, klicke Reset to Default oben rechts. Du wirst um Bestaetigung gebeten. Der Editor laedt die ausgelieferte Default-LESS-Datei; Save & Compile schreibt sie zurueck in die Datenbank.

Reset to Default laedt das ausgelieferte Stylesheet. Du musst noch Save & Compile druecken.

Reset loescht das Custom-Stylesheet

Reset ersetzt jede Zeile im Editor — auch eigene CSS-Regeln unterhalb des Token-Bereichs sind dann weg. Kopiere Bloecke, die du behalten willst, vor dem Reset raus.

Custom LESS vs. Theme LESS

Zwei Stylesheet-Ebenen laufen auf der oeffentlichen Seite zusammen:

• Custom LESS (dieser Editor) — liegt in der Datenbank, im Backend editierbar, laedt ohne Deploy neu.
• Theme LESS (_theme/{projekt}/public/css/…) — wird mit dem Nuxt-Theme ausgeliefert. Nur von einem Entwickler mit Code-Zugriff aenderbar. Wird beim Build kompiliert.

Custom LESS wird nach Theme LESS geladen, daher gewinnen Custom-Regeln bei gleichem Selektor.

Ist ein Token im Custom LESS gesetzt, ueberschreibt es auch die Theme-Defaults fuer die --me-*-Variablen des Menu Editors und jedes Widget, das die --color-*-Custom-Properties nutzt.

Wo die Datei gespeichert ist

Das kompilierte CSS liegt im Server-CSS-Cache, die LESS-Quelle in der Spalte website.custom_less. Ein Syntax-Fehler im LESS laesst das bisherige CSS aktiv und zeigt einen Fehler unter dem Editor — du kannst die Live-Seite also nie durch eine falsche Klammer kaputtmachen.

Haeufige Fehler

Syntax-Fehler blockieren das Speichern

Wenn das LESS nicht kompiliert, schlaegt das Speichern fehl und ein roter Banner zeigt die fehlerhafte Zeile. Fehler korrigieren und Save & Compile nochmal druecken. Das alte CSS bleibt in der Zwischenzeit aktiv.

Farb-Funktionen brauchen Hex-Input

LESS-Helper wie darken(), lighten(), fade() brauchen Hex-Werte. rgb() oder eine CSS-Variable als Input funktioniert nicht.

Browser-Cache

Nach dem Speichern ein Hard-Reload (Ctrl+Shift+R oder Cmd+Shift+R) auf der oeffentlichen Seite machen, falls die alten Farben noch zu sehen sind. Das CMS setzt Cache-Header auf dem kompilierten CSS, aber Browser ignorieren sie bei einem weichen Reload.

Siehe auch

• SEO-Meta pro Seite — Titel, Description, Canonical, OG-Bild.
• Redirects — URLs auch nach einer Umbenennung am Leben halten.
• AI-Textgenerierung — CSS-Snippets per AI erzeugen.