Design

Das Aussehen stellst du im Seitenlayout unter Creuva-Design ein. Unter den Feldern zeigt eine Live-Vorschau Überschrift, Buttons und Boxen mit der aktuellen Auswahl.

Feld	Optionen
Farbschema	17 Schemen, siehe unten
Farbmodus	Light / Minimal, Dark / Creative, Light oder Dark nach Systemeinstellung
Typografie	Modern (Plus Jakarta Sans) oder Editorial (Überschriften in Fraunces) – mit jedem Farbmodus kombinierbar
Eckenradius	Eckig, Klein, Mittel, Groß – Rundung von Karten, Buttons und Bildern
Primärfarbe, Akzentfarbe	optional eigene Farben als Hex-Wert ohne `#`, überschreiben das Schema
Logohöhe	Höhe des Logos im Header als CSS-Wert, z. B. `4rem` (Standard `2.25rem`); der Header wächst mit
Eigene Stylesheets	CSS-Dateien aus der Dateiverwaltung, siehe Eigenes CSS
Animationen	Alle Abschnitte, Nur per CSS-Klasse, Keine

Tipp

Eigene Farben prüft die Live-Vorschau: Sie zeigt einen Hinweis, wenn weiße Schrift auf der Primärfarbe oder die Akzentfarbe als Schrift auf Weiß unter einem Kontrast von 4,5:1 liegt. Die Akzentfarbe wird auch für Links und kleine Texte genutzt.

Farbschemen

Jedes Schema besteht aus einer Primärfarbe (Buttons, dunkle Flächen, Links; tönt außerdem Hintergründe, Rahmen und Text) und einer Akzentfarbe (Akzente, Badges, Icons, Fokusrahmen). Alle Schemen erfüllen die WCAG-Kontraste (Text 4,5:1, große Schrift und Grafiken 3:1) in Light und Dark.

Schema	Schlüssel	Primär	Akzent
Grün (Standard)	`green`	`#1d3b2a`	`#3c9a2f`
Salbei	`sage`	`#2f3e36`	`#52755f`
Olive	`olive`	`#2e3220`	`#647219`
Graphit & Limette	`lime`	`#1c1f22`	`#b5e61d`
Petrol	`petrol`	`#0f3a40`	`#0b7d7d`
Ozean	`ocean`	`#0b2545`	`#08759a`
Blau	`blue`	`#1b2f4b`	`#2f6fd6`
Indigo	`indigo`	`#1a1b4b`	`#4f46e5`
Violett	`violet`	`#2a1846`	`#7c4dff`
Pflaume	`plum`	`#33152e`	`#9c3d8f`
Magenta	`magenta`	`#3d1430`	`#c92a63`
Rot	`red`	`#3f1418`	`#c8323a`
Bordeaux	`bordeaux`	`#3b0d1f`	`#a3214e`
Terracotta	`terracotta`	`#3b2219`	`#b84f24`
Orange	`orange`	`#2d1b0e`	`#f08c00`
Gelb	`yellow`	`#26241c`	`#f2b705`
Mitternacht & Gold	`gold`	`#141a2e`	`#c9a227`

Den Schlüssel brauchst du für creuva:install --scheme=…, für die demo.yaml und für Links zum Style-Switcher.

Farbmodus „System“

Mit „Light oder Dark nach Systemeinstellung“ erscheint die Website hell oder dunkel, je nachdem, was im Betriebssystem bzw. Browser des Besuchers eingestellt ist, und wechselt mit, wenn sich die Einstellung ändert. Ein kleines Skript setzt den Modus vor dem ersten Rendern, die Seite blitzt also nicht auf. Ohne JavaScript bleibt sie hell.

Design pro Website

Im Startpunkt lassen sich Farbschema, Farbmodus, Typografie und Eckenradius unter „Creuva-Design“ zusätzlich festlegen. Diese Werte haben Vorrang vor dem Seitenlayout; ein Schema im Startpunkt ersetzt auch die eigenen Farben des Layouts. So können mehrere Websites ein Layout nutzen und trotzdem unterschiedlich aussehen.

Der Installer und die Demos lassen die Felder im Startpunkt leer („Wie im Seitenlayout“), damit Änderungen im Seitenlayout sofort sichtbar werden.

Animationen

Einstellung	Wirkung
Alle Abschnitte (Standard)	Alle Elemente im Hauptbereich blenden beim Scrollen von unten ein, Raster und News-Listen Element für Element, „Bild & Text“ von beiden Seiten; Kennzahlen zählen hoch
Nur per CSS-Klasse	Nur Elemente mit einer Klasse aus „Animation“ (siehe CSS-Klassen)
Keine	Keine Scroll-Animationen, keine Einstiegsanimation im Hero, Zahlen erscheinen sofort

Die Klassen u-reveal-* legen die Richtung je Element fest und haben Vorrang; u-reveal-none nimmt ein Element oder einen ganzen Artikel aus.
Inhalte, die beim Laden schon sichtbar sind, werden nie ausgeblendet; ohne JavaScript ist alles sofort sichtbar.
Besucher mit der Systemeinstellung „Bewegung reduzieren“ sehen keine Animationen.
Hover-Effekte (Karten heben sich, Bilder zoomen, Pfeile wandern mit) sind immer aktiv.

Dauer, Weg und Verzögerung kannst du per CSS anpassen:

:root {
  --reveal-duration: 0.6s;   /* Standard 0.8s */
  --reveal-distance: 1.5rem; /* Standard 2.5rem */
  --reveal-stagger: 60ms;    /* Verzögerung je Element im Raster */
  --hover-lift: -4px;        /* Anheben von Karten beim Hover */
}

Schriften

Plus Jakarta Sans und Fraunces werden mit dem Theme ausgeliefert und selbst gehostet, es gibt also keine Anfragen an Google. Fraunces lädt der Browser nur, wenn die Typografie „Editorial“ gewählt ist.

Style-Switcher

Das Frontend-Modul Creuva › Creuva Style-Switcher blendet am linken Rand ein Zahnrad ein. Darüber probieren Besucher Farbschema, Farbmodus (Light, Dark, System), Typografie (Modern, Editorial) und Eckenradius live aus – ideal für eine Demo oder um mit Kunden ein Farbschema auszuwählen.

Einrichten

Lege unter Layout › Themes › Module ein Modul vom Typ Creuva Style-Switcher an (die Demos haben es bereits).
Weise es im Seitenlayout dem Bereich top zu, damit die Auswahl vor dem ersten Rendern greift.

Die Auswahl wird nur im Browser gespeichert (localStorage) und gilt auf allen Seiten mit dem Modul.

Kombination per Link

Eine Kombination lässt sich direkt verlinken, z. B.:

https://www.deine-domain.de/?scheme=red&theme=dark&typography=editorial&radius=none

Parameter	Werte
`scheme`	Schlüssel des Farbschemas, z. B. `petrol`
`theme`	`light`, `dark`, `auto`
`typography`	`modern`, `editorial`
`radius`	`none`, `small`, `medium`, `large`

Auswahl für die Website speichern

In der Frontend-Vorschau zeigt der Switcher Administratoren zusätzlich den Button „Für die Website speichern“. Er speichert die Auswahl im Startpunkt der aktuellen Website, leert den Seiten-Cache und gilt danach für alle Besucher. Redakteure ohne Admin-Rechte und normale Besucher sehen den Button nicht.

Nur für Backend-Benutzer

Mit der Moduloption „Nur für angemeldete Backend-Benutzer“ ist der Switcher für Besucher unsichtbar. Er erscheint nur, wenn du im Backend angemeldet bist; eine früher im Browser gespeicherte Auswahl gilt für Besucher dann nicht mehr.

Anmerkung

Setze diese Option auf Live-Websites. Ohne sie sieht jeder Besucher den Switcher.

Eigenes CSS und Templates

Eigene Stylesheets

Lege eine CSS-Datei in der Dateiverwaltung an, z. B. files/design/custom.css, und wähle sie im Seitenlayout unter Creuva-Design › Eigene Stylesheets aus. Sie wird nach dem Creuva-CSS geladen, mit dem Änderungszeitpunkt als Cache-Busting. Der Ordner muss öffentlich sein.

Alle Creuva-Styles liegen in CSS-Cascade-Layern (creuva.*). Deine eigenen Styles ohne Layer haben dadurch immer Vorrang – ohne !important und ohne lange Selektoren.

Farben, Abstände und Rundungen

Farben, Abstände und Typografie sind CSS-Variablen und lassen sich einfach überschreiben:

:root {
  --scheme-primary: #123456; /* Primärfarbe inkl. getönter Hintergründe */
  --radius-l: 0.75rem;
}

Für eigene Primär- und Akzentfarben reicht meist das Seitenlayout (siehe Design).

Akkordeon mit eigenem Icon

Vergib dem Akkordeon die Klasse u-accordion-icon und zusätzlich eine eigene Klasse, und setze das Icon per CSS:

.content-accordion.mein-icon {
  --accordion-icon-mask: url("/files/icons/paket.svg");
}

Templates anpassen

Alle Templates sind Twig-Templates und lassen sich wie gewohnt im Ordner templates/ überschreiben, z. B. templates/content_element/creuva_hero.html.twig:

{% extends '@Contao/content_element/creuva_hero.html.twig' %}

Druck

Gedruckt wird nur der Inhalt in Schwarz auf Weiß, ohne Header, Footer, Breadcrumb, Slider-Steuerung und Hintergründe. Links im Text erscheinen mit ihrer Adresse, Akkordeons sind aufgeklappt, Karten und Bilder werden nicht über Seiten getrennt.

Design

Farbschemen

Farbmodus „System“

Design pro Website

Animationen

Schriften

Unterabschnitte von Design

Style-Switcher

Einrichten

Kombination per Link

Auswahl für die Website speichern

Nur für Backend-Benutzer

Eigenes CSS und Templates

Eigene Stylesheets

Farben, Abstände und Rundungen

Akkordeon mit eigenem Icon

Templates anpassen

Druck