API-Keys
Micro Frontend

Styling-Tool

Brande das Micro-Frontend, indem du Design-Tokens und Layout-Optionen anpasst. Jeder Parameter ist erklaert, die Vorschau skinnt live mit, und die erzeugte Config ist fertig zum Einfuegen — als Theme-Objekt, CSS-Block oder kompletter mount()-Aufruf.

Presets
Vorschlag aus einer URL

Fuege die Website einer Marke ein — wir lesen ihr CSS und schlagen Akzentfarbe, Schrift und Radius vor. Ein Startpunkt zum Feinjustieren, keine exakte Kopie.

Marke & Akzent

--aditus-accent

Primaere Markenfarbe: Buttons, aktive Zustaende, Betonung.

--aditus-accent-strong

Hover-/Pressed-Abstufung des Akzents.

--aditus-accent-contrast

Text-/Icon-Farbe auf dem Akzent.

--aditus-accent-soft

Zarte Akzent-Toenung fuer weiche Fuellungen/Hovers.

--aditus-accent-secondary

Sekundaerer Akzent fuer das Highlight des aktuellen Schritts.

--aditus-accent-secondary-soft

Zarte sekundaere Toenung.

Flaechen & Text

--aditus-surface

Hintergrund von Panels/Karten/Inputs.

--aditus-surface-2

Leicht erhoehte Flaeche fuer verschachtelte Fuellungen.

--aditus-border

Haarlinien-Rahmenfarbe.

--aditus-border-strong

Kraeftigerer Rahmen fuer Inputs/Controls.

--aditus-text

Primaere Textfarbe.

--aditus-muted

Gedaempfte/sekundaere Textfarbe.

--aditus-heading

Ueberschriften-Farbe, heller als Fliesstext.

Detail-Overlay

--aditus-overlay-surface

Deckende Flaeche des Artikel-Detail-Modals. Bei transparenter Flaeche (Glas-Themes) eine DECKENDE Farbe setzen, damit der schwebende Dialog nicht durchsichtig wird und der Text lesbar bleibt.

--aditus-overlay-backdrop

Abdunkelung hinter dem Detail-Modal. Fuer dunkle Themes eine dunkle Abdunkelung (z. B. rgba(0,0,0,0.6)), da der aus dem Text abgeleitete Standard ein heller Schleier waere.

Statusfarben

--aditus-success

Erfolgsfarbe: abgeschlossene Schritte, Fertig-Haken.

--aditus-success-soft

Zarte Erfolgs-Toenung.

--aditus-danger

Fehlerfarbe.

--aditus-danger-soft

Zarte Fehler-Toenung.

Form & Abstand

--aditus-radius

Eckenradius von Panels/Karten.

--aditus-radius-sm

Eckenradius von Inputs/kleinen Chips.

--aditus-radius-button

Eckenradius von Buttons.

--aditus-gap

Abstand zwischen gestapelten Abschnitten in einer Phase.

--aditus-shadow

Box-Shadow fuer erhoehte Panels/Karten.

Typografie

--aditus-font

Schriftfamilien-Stack fuer das gesamte Micro-Frontend.

Layout & Verhalten

Wo die Journey startet: beim Event-Picker oder bei der Artikelauswahl eines gepinnten Events (entfernt den Event-Schritt).

Der Event-Schritt als vertikale Liste oder als Karten-Grid. Jedes Event zeigt nur seine eigenen Infos plus einen einzelnen Auswählen-Button.

Der Artikel-Schritt als vertikale Liste oder als Preis-Karten-Grid (per articleContent gestaltet).

Wie Artikel innerhalb einer aufgeklappten Gruppe der Listen-Ansicht liegen: kompakter Stapel oder responsives Mehrspalten-Grid.

Wie Artikel in der Listen-Ansicht gewaehlt werden: ein einzelner Auswaehlen-Button je Zeile, oder ein Mengen-Stepper je Zeile mit Zwischensummen und einem Weiter-Button, der alle Mengen auf einmal in den Warenkorb legt.

Zeigt das Artikel-Icon (das kleine getoente SVG, das der echte Shop links neben jedem Ticket rendert) in der Listen-Ansicht.

Zeigt eine Headergrafik: das grosse Marken-Banner des gewaehlten Events als formatfuellende Kopfgrafik ueber dem Flow. Erscheint, sobald ein Event gewaehlt ist.

Culture als Accept-Language-Header — steuert die lokalisierten Inhalte der API (z. B. de-DE, en-GB).

Bei Schrittwechsel das Widget sanft in den sichtbaren Bereich ruecken (nie beim ersten Mount). Aus, wenn der Host das Scrollen selbst steuert.

Injiziert das mitgelieferte neutrale Standard-Theme. Ausschalten, wenn du dein eigenes vollstaendiges Skin lieferst.

Live-Vorschau
Vorschau-HintergrundNur Styling-Hilfe — kein Micro-Frontend-Token. Das Micro-Frontend ist transparent und uebernimmt den Hintergrund deiner Seite.
theme.ts
// Noch keine Aenderungen — passe ein Token an, um das Theme zu erzeugen.

Es werden nur geaenderte Tokens ausgegeben — weggelassene behalten die mitgelieferten Defaults.