Contao-Theme von Avando Labs
Contao kann alles — nur beim Gestalten fängt jedes Projekt wieder von vorn an: Templates überschreiben, CSS schreiben, Layout-Sets pflegen, für jede Kundenmarke ein Theme von Hand. Und wer gestalten kann, aber nicht programmieren will, kommt gar nicht erst an die Schrauben.
Avando AVE gibt dir die Power von Contao mit der Leichtigkeit eines Pagebuilders.
Farben, Schriften, Abstände, Ecken, Header, Karten: alles Einstellungen, live im Frontend, ohne eine Zeile CSS. Aber ohne Div-Suppe, ohne Mammut-Framework und ohne Fremdmodule, die dir beim nächsten Contao-Update um die Ohren fliegen.
Für Agenturen und Freiberufler · KI-ready ab Werk · 30 KB CSS gesamt · keine Fremdmodule · kein Build-Schritt · Schriften lokal
Plakat
Gediegen
Zum Anfassen
Das hier ist kein Screenshot. Vier Regler genügen für den Ausschnitt links — im Design Studio sind es 104, in neun Gruppen. Sie steuern echte CSS-Variablen der Oberfläche rechts, und genau so funktioniert das ganze Theme: Du änderst einen benannten Wert, und alles, was sich darauf bezieht, zieht mit.
Rahmen, Radius und Schatten hängen an denselben Reglern.
Die Sekundärfarbe entsteht per oklch() aus der Primärfarbe — du stellst sie nicht ein.
Das alles hängt an den vier Reglern:
Im echten Studio kommen 100 weitere Einstellungen dazu — Header und Navigation, Dropdowns, Footer-Flächen, Bildfilter, Glaseffekt, Übergangsdauer. Und alles wirkt sofort an der echten Kundenseite.
Warum AVE
Dasselbe Theme sieht für jede Rolle anders aus — und nimmt jeder etwas anderes ab.
Für Entwickler
Keine Template-Overrides für jede Marke, keine Layout-Set-Wildwuchs. Ein dokumentierter Satz --av-*-Tokens, eine @layer-Kaskade, in der dein custom.css immer gewinnt. Kein Preprozessor, kein Bundler, kein Build in der Schleife — und jeder Design-Stand ist eine Textdatei, also diff- und versionierbar.
Für Designer
Markenfarbe, Schrift, Rundung, Dichte, Schatten — direkt im Frontend, mit sofortiger Wirkung an echten Inhalten. Kein CSS, kein Ticket, kein Warten auf einen Deploy. Und es bleibt stimmig: Sekundärfarbe, Hover-Töne und die ganze Radius-Rampe leiten sich aus dem ab, was du einstellst.
Für Redaktion und Kunde
Redakteure bauen weiter aus normalen Contao-Bausteinen und wählen „als Karte rahmen“ oder „Hintergrund mit Overlay“ aus einer Liste — nichts zum Auswendiglernen, nichts, was kaputtgehen kann. Und der Kunde bekommt seine Varianten als Link, statt sie sich vorstellen zu müssen.
Ebene 1 · Die ganze Website
01 / 06 · Basis
Basis
Kein Template-Wechsel, kein zweites Layout, kein Deploy. Was sich ändert, ist ein :root { … }-Block. Die sechs Stände hier unterscheiden sich um 33 bis 65 --av-*-Werte — im Mittel vierzig.
Das Design Studio
Als angemeldeter Administrator erscheint unten rechts ein Knopf. Ein Klick, und der Drawer fährt ein — die Kundenseite bleibt daneben sichtbar und bedienbar.
16 Vorlagen als StartpunktNicht als Endzustand gedacht: Du nimmst die, die grob in die Richtung geht, und stimmst darunter fein ab. Brutalist schaltet auf Monospace, Midnight dreht die Flächenordnung ins Dunkle. 🎲 Zufall würfelt eine stimmige Kombination, wenn keine passt.
Neun Regler-Gruppen, wenn du sie brauchstVon Grundfarben über Header, Navigation und Karten bis Footer und Effekten. Du musst da nicht hinein — aber wenn ein Kunde die Markenfarbe auf den Hexcode genau will, kommst du dran.
KI-Design mit deinem Schlüssel„Tischlerei, bodenständig, warmes Holz“ → ein vollständiger Look. Optional und standardmäßig aus: Ohne hinterlegten Schlüssel ist der Abschnitt unsichtbar und es geht kein Byte nach draußen. Mit Schlüssel gilt dein Anbieter, dein Vertrag — der Schlüssel wird verschlüsselt abgelegt und nie wieder im Formular angezeigt. „Verfeinern“ behält Marke und Schriften und schärft nur den Rest nach.
Rückgängig, Versionen, Export⌘Z gilt fürs ganze Design, nicht für den letzten Regler. Jeder Stand lässt sich benennen, anheften und als Datei herunterladen — und im nächsten Projekt wieder einspielen.
KI-ready ab Werk
Zwischen klassischem CMS und modernen KI-Workflows klafft eine Lücke. Theme-Logik steckt in Template-Overrides, eigenen Konventionen und Pagebuilder-Markup. Nichts davon kennt eine KI, und was sie dort ändert, prüft keiner.
AVE ist anders gebaut: auf Webstandards und benannten Variablen. Genau die Sprache, die eine KI fließend spricht.
CSS-Variablen sind die SchnittstelleDas ganze Aussehen hängt an 254 --av-*-Tokens mit dokumentierten Standardwerten. Eine KI schreibt einen :root-Block, und die Seite folgt. Kein Template, kein PHP, kein Build-Schritt.
Standards statt EigenbauNatives HTML5 wie <details> und <dialog>, Contaos eigene Inhaltselemente, @layer, light-dark(), oklch(), dazu die Werte von Open Props. Nichts Proprietäres, das ein Modell erst lernen müsste.
Wenige Werte, ganzer LookSekundärfarbe, Hover-Töne, gedämpfter Text und Dunkelmodus rechnet der Browser selbst aus. Eine KI muss nur wenige Zahlen liefern. Kleine Ausgabe heißt kleine Fehlerfläche.
Änderungen, die sich nicht festfressencustom.css liegt außerhalb aller Layer: Sie gewinnt ohne !important und überlebt jedes Update. Was eine KI ändert, ist eine Textdatei. Du kannst sie diffen, prüfen und mit einem Löschen zurücknehmen.
/* Prompt: „Tischlerei, bodenständig, warmes Holz“ */ :root { --av-color-primary: #8a5a2b; --av-color-surface: light-dark(#f6efe6, #1d1712); --av-font-display: var(--av-font-serif); --av-radius-scale: .4; --av-space-scale: 1.05; }
Fünf Zeilen, ein Look. Sekundärfarbe, Hover-Töne, Dunkelmodus, Radius- und Abstandsrampen leitet der Browser daraus ab.
Jedes Token mit Standardwert, jede der 136 Utility-Klassen. Das Nachschlagewerk für Mensch und Maschine.
Die Bauregeln: Werte aus Open Props, natives HTML5, keine CDNs, das Klassenschema.
Die Ableitungen selbst, lesbar statt kompiliert. Auch eine KI sieht, was woraus folgt.
Für Agenturen
Eure Kunden bleiben auf einem etablierten, updatesicheren CMS, und euer Team arbeitet trotzdem mit KI-Werkzeugen. Weil AVE nur auf Standards setzt, gibt es keinen Lock-in, weder an einen Pagebuilder noch an einen KI-Anbieter. Ein Kundendesign ist ein kurzer, lesbarer Variablenblock: übergebbar, prüfbar und schnell auf eine neue Richtung umgestellt.
Für Designer
Beschreib einer KI die Marke, und sie antwortet in genau den Größen, in denen du denkst: Primärfarbe, Schrift, Rundung, Dichte, Schatten. Statt verschachteltem CSS bekommst du benannte Werte, die du liest und verstehst, ohne einen Entwickler zu fragen. Die Ableitungen halten den Look stimmig, auch wenn nur eine Handvoll Werte kommt.
Für Entwickler
Claude Code, Cursor oder Copilot finden im Bundle einen endlichen, dokumentierten Aktionsraum vor statt einer leeren Datei. Sie schreiben in custom.css und Contaos Klassenfelder, ohne das Framework anzufassen. Kein Build in der Schleife, jede Änderung ein Diff. So bleibt eure Review genauso streng wie bei Code von Menschen.
Und mit dem Design Studio? Dann geht es auch ohne Editor: Du tippst das Briefing in den Drawer, die KI deines Anbieters liefert die Werte, und der Server lässt nur bekannte Regler mit gültigen Werten durch. Das Ergebnis ist erst Vorschau, dann eine Version mit eigenem Link. Live wird es, wenn du speicherst. Ohne Schlüssel bleibt die KI aus.
Kundenfreigabe
Die Designrunde kostet dich bisher entweder einen Staging-Klon, den du pflegen musst, oder ein Screenshot-PDF, an dem der Kunde nicht klicken kann. Beides fällt weg: Du speicherst jede Richtung als Version, und jede Version hat eine URL. Der Kunde öffnet sie und sieht seinen kompletten Auftritt in dieser Variante — auf jeder Seite, mit echten Inhalten, ohne Login. Am Live-Stand ändert sich dabei nichts.
Beispiel Drei Richtungen für denselben Kunden — drei Links aus einer Installation:
Zwischendurch geht nie etwas ungewollt live. Verworfene Richtungen bleiben als Version erhalten — falls der Kunde es sich anders überlegt.
Pflichtprogramm
Seit Mitte 2025 gilt das Barrierefreiheitsstärkungsgesetz für einen großen Teil gewerblicher Websites. Der häufigste Verstoß ist zugleich der am leichtesten messbare: zu wenig Kontrast. Und ausgerechnet der entsteht fast immer aus einer Vorgabe, die du nicht ändern darfst — der Markenfarbe des Kunden.
Von Hand ist das kaum zu prüfen: viele Seiten, hell und dunkel, jede Farbe gegen ihren Hintergrund. Die zweite Stelle, an der Agenturen regelmäßig haften, ist noch banaler — eine Schriftzeile, die die IP jedes Besuchers an einen Dritten schickt.
01 · Kontrast nach WCAG 2.1
Der Kunde gibt ein Markenrot vor. Als Fläche sieht es hervorragend aus. Als Linkfarbe auf Weiß hat es 3,1:1 und verfehlt den Standard — und das merkt niemand, bis jemand prüft. Ein Klick auf Kontraste im Design Studio misst den sichtbaren Text der geöffneten Seite im gerade aktiven Farbschema, mit den echten gerenderten Farben statt mit den Werten aus dem Stylesheet.
Nach der Regel, nicht nach GefühlFormel und Schwellen nach WCAG 1.4.3: 4,5:1 für Fließtext, 3:1 für große Schrift — „groß“ heißt ab 24 px, oder ab 18,66 px bei Schriftstärke 700.
Sortiert nach UnterschreitungNicht nach dem rohen Zahlenwert. Eine Überschrift mit 2,6:1 verfehlt ihr Soll von 3:1 knapp — ein Fließtext mit 3,0:1 verfehlt 4,5:1 deutlich. Oben steht, was wirklich schlimm ist.
Die Markenfarbe passt sich anDer Schalter Kontrast-Anpassung hellt die Markenfarbe als Text so weit auf oder dunkelt sie ab, bis sie gegen den Seitenhintergrund AA erreicht. Als Fläche bleibt sie exakt der Hexcode, den der Kunde vorgibt. Du musst dich nicht zwischen Marke und Lesbarkeit entscheiden.
Bewegung, Fokus, Hell/DunkelWer im System „Bewegung reduzieren“ aktiviert hat, bekommt keine Animationen — Hintergrundvideos zeigen dann nur ihr Standbild. Fokus-Rahmen und der Dunkelmodus kommen aus dem Framework, nicht aus dem Projekt.
Was ehrlicherweise bei dir bleibt: Alt-Texte, eine sinnvolle Überschriften-Reihenfolge und die Prüfung der fertigen Website. Der Kontrast-Check ist ein Werkzeug dafür, kein Konformitätsnachweis: Text auf Fotos misst er nur eingeschränkt, Hover- und Fokus-Zustände und Seiten, die du nicht geöffnet hast, gar nicht.
02 · DSGVO
Eingebundene Google Fonts übertragen die IP-Adresse jedes Besuchers an einen Dritten. Genau daran hängen die Abmahnwellen der letzten Jahre. AVE macht diesen Aufruf unnötig: Wählst du im Studio eine Schrift, wird sie einmalig beim Speichern heruntergeladen und liegt danach als Datei bei dir — ausgeliefert wird sie von deinem Server.
32 Variable Fonts, alle lokalSie liegen unter files/theme/fonts/<slug>/variable.woff2 in deiner Installation. Eine Variable Font deckt alle Schnitte ab — eine Datei statt sechs.
Kein CDN, nirgendsCSS und JavaScript des Themes kommen aus dem Bundle deiner Installation. Kein jQuery von einem fremden Host, kein Icon-Font aus der Cloud, kein Analytics-Schnipsel.
Nichts, was ein Banner brauchtDas Theme setzt keine Cookies und lädt nichts von Dritten nach. Was auf deiner Seite einwilligungspflichtig ist, hast du selbst eingebaut — es kommt nicht aus dem Theme.
Nebenbei: schnellerSelbst gehostete Schriften sparen den DNS-Lookup und den Verbindungsaufbau zu einem zweiten Host. Datenschutz und Ladezeit zeigen hier ausnahmsweise in dieselbe Richtung.
Kein Rechtsrat: Ob und wie die Vorgaben für dein Projekt gelten, klärt deine Rechts- oder Datenschutzberatung. AVE sorgt dafür, dass die technische Seite nichts zu klären übrig lässt.
Ebene 2 und 3
Gebaut wird weiter aus ganz normalen Contao-Bausteinen — Text, Bild, Überschrift, Akkordeon, Slider. Das Theme legt sich darüber und gibt jedem Baustein zusätzliche Design-Felder. Niemand muss eine Klasse auswendig lernen oder ins CSS-Feld tippen.
Sektionen — Register „Design“Am Artikel oder an der Elementgruppe: Spaltenlayout, Hintergrund samt Bild und Overlay, Hero-Mindesthöhe, Textfarbe, Ausrichtung. Spalten stapeln auf schmalen Bildschirmen von selbst.
Inhaltselemente — Register „Element-Stil“Am einzelnen Baustein: als Karte rahmen, Hintergrund geben, über mehrere Spalten ziehen, Bildform wählen, Hyperlink zum Primär-Button machen.
Rollen sauber getrenntSektionen und Elemente pflegt jede Redakteurin. Das Design Studio sehen nur angemeldete Administratoren — weil eine Änderung dort die ganze Website betrifft.
Der Unterbau
Ein Theme, das auf einem Mammut-Framework sitzt, erbt dessen Gewicht und dessen Update-Zyklus gleich mit. Und jedes Fremdmodul, das du für ein einzelnes Feature nachrüstest, ist eine Wette darauf, dass es beim nächsten Contao-Release noch gepflegt wird. AVE geht beide Wetten nicht ein.
Kein Bootstrap, kein Tailwind, kein Foundation, kein jQuery. Darunter liegt Open Props (7,5 KB gzip): 607 benannte Werte und ein paar Keyframes — keine einzige Komponenten- oder Utility-Klasse. Es liefert Zahlen, kein Markup. Dazu ein Reset von 2,3 KB, der ganz unten in der Kaskade liegt.
Kein Slider-Plugin, kein Layout-Builder, kein Formular-Addon. Alles, was AVE gestaltet, sind Contaos eigene Inhaltselemente. avando/ave verlangt PHP 8.3 und Contao 5.7 oder 6 — sonst nur drei Pakete, die Contao ohnehin mitbringt. Open Props liegt als feste Kopie im Bundle, nicht als lebende Abhängigkeit: Es kann sich unter dir nicht ändern.
Die Lightbox (55 KB) kommt erst auf Seiten, die wirklich eine Galerie haben. Contaos eigenen Swiper liefert AVE nicht mit — er wird nur auf die Theme-Tokens eingefärbt.
Das Framework liegt im Bundle, deine Projekt-Anpassungen getrennt davon in custom.css und theme.css. Ein Update überschreibt sie nicht. Weniger Abhängigkeiten heißt weniger, das brechen kann.
Native CSS Custom Properties, kein Sass, kein Preprozessor. Der Browser löst zur Laufzeit auf. ave:css:build fasst nur die neun Quelldateien zusammen — das brauchst du beim Gestalten nie.
Ein separates Zusatz-Bundle. Ohne es setzt du dieselben --av-*-Werte von Hand in theme-vars.css oder custom.css. Das Theme läuft auch dann vollständig.
Einmal in tokens.css deklariert. Projekt-Overrides stehen ohne Layer und gewinnen gegen alles — unabhängig von der Selektor-Spezifität. Du musst dich nie gegen das Theme kämpfen.
/* Sekundärfarbe: aus der Primärfarbe, über zwei Dials */ --av-color-secondary: oklch(from var(--av-color-primary) l calc(c * var(--av-sec-chroma)) calc(h + var(--av-sec-hue-shift))); /* Gedämpfter Text: Mischung aus Text und Fläche */ --av-color-text-muted: color-mix(in oklch, var(--av-color-text) var(--av-muted-fraction), var(--av-color-surface)); /* Ganze Radius-Rampe bewegen — nicht vier Stufen pflegen */ --av-radius-scale: 1.4;
Wer die Primärfarbe ändert, bekommt Sekundärfarbe, Hover-Varianten, gedämpften Text und die Dunkelmodus-Werte automatisch mit. Das ist auch der Grund, warum ein Sprachmodell hier nur wenige Zahlen ausgeben muss, um ein stimmiges Design zu treffen — 254 benannte Tokens, 136 Utility-Klassen, ein endlicher Aktionsraum statt frei erfundenem CSS.
Avando AVE für Contao
Für Agenturen und Freiberufler, die Contao-Seiten für Kunden bauen — und die Designrunde nicht mehr über Staging-Kopien und Screenshot-PDFs drehen wollen. Und die KI-Werkzeuge nutzen möchten, ohne Contao dafür aufzugeben.
Contao 5.7 und 6 · PHP 8.3+ · Design Studio als optionales Zusatz-Bundle
