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.