> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Styleshub

> Live-Konfiguration im Frontend

## Einführung

Das StylesHub ist ein interaktives Tool im Backend, mit dem du Farben, Rahmen, Schatten und weitere Gestaltungsoptionen deines Shops mit einem Klick anpasst, während dein echter Shop live als Vorschau daneben läuft. Ein Klick auf ein Element in der Vorschau öffnet direkt die passende Einstellung, jede Änderung ist sofort sichtbar. Deine Änderungen sind dabei zunächst nur für dich sichtbar, sodass du in Ruhe experimentieren kannst, bevor du sie über den Speichern-Button für alle Besucher übernimmst.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/EaQjwIOo3vUgpmVw/images/niu-plus-styleshub-uebersicht-nummeriert.png?fit=max&auto=format&n=EaQjwIOo3vUgpmVw&q=85&s=f08f3a4d52f1d72eb2891367c5452e8a" alt="Nummerierte Übersicht der StylesHub Oberfläche" width="3118" height="1627" data-path="images/niu-plus-styleshub-uebersicht-nummeriert.png" />
  </Frame>
</div>

Als erste Orientierung findest du hier die wichtigsten Bereiche der Oberfläche:

1. <span style={{display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#f2003c', borderRadius: '3px', marginRight: '6px', verticalAlign: 'middle'}} />**Live-Vorschau:** Dein Shop mit den aktuellen Einstellungen in Echtzeit
2. <span style={{display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#22c55e', borderRadius: '3px', marginRight: '6px', verticalAlign: 'middle'}} />**Home und Modus:** Zurück zur Übersicht sowie Umschalter für Hell- und Dunkelmodus
3. <span style={{display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#22c55e', borderRadius: '3px', marginRight: '6px', verticalAlign: 'middle'}} />**Ansicht:** Zoom, Vorschaubreite, Raster, Rückgängig/Wiederholen und Speichern
4. <span style={{display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#cb6ce6', borderRadius: '3px', marginRight: '6px', verticalAlign: 'middle'}} />**Seite:** Wahl der Seiten-Vorschau, etwa Startseite, Kategorieseite, Produktdetailseite, Warenkorb oder Checkout
5. <span style={{display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#cb6ce6', borderRadius: '3px', marginRight: '6px', verticalAlign: 'middle'}} />**Eigene Adresse:** Eine beliebige Shop-URL für die Vorschau eingeben, z. B. eine eigene Kontaktseite
6. <span style={{display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#cb6ce6', borderRadius: '3px', marginRight: '6px', verticalAlign: 'middle'}} />**Farben & Flächen:** Auswahl der Fläche, die du bearbeiten möchtest, etwa Seite, Karten, Topbar, Header, Navigation, Sidebar oder Footer
7. <span style={{display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#cb6ce6', borderRadius: '3px', marginRight: '6px', verticalAlign: 'middle'}} />**Bereiche:** Auswahl einzelner Komponenten innerhalb einer Fläche, z. B. Header
8. <span style={{display: 'inline-block', width: '12px', height: '12px', backgroundColor: '#38b6ff', borderRadius: '3px', marginRight: '6px', verticalAlign: 'middle'}} />**Editor-Panel:** Grundfläche und Rollen der aktuell ausgewählten Fläche, etwa Hintergrund-, Text-, Überschriften-, Akzent- und Rahmenfarben

<Note>
  Ist Theme v2 in deinem Shop noch nicht aktiviert, zeigt dir die Vorschau die neue Gestaltung trotzdem an. Im Shop selbst wirken sich die Einstellungen erst aus, nachdem du Theme v2 in der Companion App aktiviert hast.
</Note>

## Anleitung

### Grundeinstellungen

#### <span style={{display: 'inline-block', width: '16px', height: '16px', backgroundColor: '#22c55e', borderRadius: '4px', marginRight: '8px', verticalAlign: 'middle'}} />Home und Modus

Oben in der **Symbolleiste (2)** findest du folgende Symbole:

<Icon icon="house" /> Verlassen und zurück zur Companion App, bei ungespeicherten Änderungen mit Rückfrage

<Icon icon="sun" /> Hellmodus aktivieren

<Icon icon="moon" /> Dunkelmodus aktivieren

<Icon icon="bullseye" /> Bearbeitungsmodus für die Live-Vorschau

So kannst du deine Einstellungen sowohl im Hell- als auch im Dunkelmodus prüfen.

Ist der Bearbeitungsmodus aktiviert, kannst du direkt im Frame auf Elemente wie Hintergrund oder Schrift klicken und die zugehörigen Farben anschließend im Editor-Panel bearbeiten. Ist er nicht aktiviert, bewegst du dich im Frame wie gewohnt durch den Shop und kannst normal durchklicken.

<Tip>
  Fährst du bei aktiviertem Bearbeitungsmodus mit der Maus über ein Element im Frame, zeigt dir die Vorschau, in welchem Strukturelement es sich befindet (etwa Header oder Navigation) und in welcher Rolle (etwa Text oder Überschrift). Im Editor-Panel siehst du dazu die zugrundeliegenden CSS-Klassenselektoren.

  <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
    <Frame>
      <img src="https://mintcdn.com/dzm/EaQjwIOo3vUgpmVw/images/niu-plus-styleshub-bearbeitungsmodus-hover.jpg?fit=max&auto=format&n=EaQjwIOo3vUgpmVw&q=85&s=6c6c883c6d6ce311de9ecac4833d5515" alt="Hover im Bearbeitungsmodus zeigt Strukturelement und CSS-Klassenselektor" width="1434" height="976" data-path="images/niu-plus-styleshub-bearbeitungsmodus-hover.jpg" />
    </Frame>
  </div>
</Tip>

#### <span style={{display: 'inline-block', width: '16px', height: '16px', backgroundColor: '#22c55e', borderRadius: '4px', marginRight: '8px', verticalAlign: 'middle'}} />Ansicht

Auf der rechten Seite der **Symbolleiste (3)** findest du folgende Symbole:

Zoomstufe (50, 75 oder 100 %)

<Icon icon="arrows-left-right" /> Vorschaubreite in Pixel, passt den Frame an die aktuelle Bildschirmgröße an

<Icon icon="angles-left" /> Navigations-Panel ein- und ausklappen

<Icon icon="angles-right" /> Editor-Panel ein- und ausklappen

<Icon icon="table-cells" /> Editor-Panel an den unteren Bildschirmrand verschieben

<Icon icon="arrow-rotate-right" /> Vorschau neu laden

<Icon icon="arrow-rotate-left" /> Letzte Änderung rückgängig machen

<Icon icon="floppy-disk" /> Einstellungen speichern

### <span style={{display: 'inline-block', width: '16px', height: '16px', backgroundColor: '#cb6ce6', borderRadius: '4px', marginRight: '8px', verticalAlign: 'middle'}} />Navigations-Panel

#### <span style={{display: 'inline-block', width: '16px', height: '16px', backgroundColor: '#cb6ce6', borderRadius: '4px', marginRight: '8px', verticalAlign: 'middle'}} />Seite

Oben in der **Liste Seite (4)** wählst du die Seiten-Vorschau aus, etwa Startseite, Kategorieseite, Produktdetailseite, Warenkorb oder Checkout. Die Einträge sind Direktlinks zu den jeweiligen Seiten.

<Note>
  Warenkorb und Checkout zeigen dabei nicht live die Daten eines Kunden, sondern nur deinen eigenen Warenkorb. Bei der Produktdetailseite wird ein zufälliges Produkt angezeigt.
</Note>

#### <span style={{display: 'inline-block', width: '16px', height: '16px', backgroundColor: '#cb6ce6', borderRadius: '4px', marginRight: '8px', verticalAlign: 'middle'}} />URL-Suche

Über das **Eingabefeld für die eigene Adresse (5)** lädst du eine beliebige Seite deines Shops in die Vorschau. Du brauchst dabei nicht die komplette Domain einzugeben, es reicht der Pfad, zum Beispiel `/kontakt`.

<Note>
  Der Shop bleibt dabei nicht stur auf der eingegebenen Adresse: Klickst du im Frame auf einen Link, folgt die Vorschau ganz normal dorthin. Du erkennst das an einem Hinweis wie "Der Shop hat weitergeleitet: angefordert war /agb, zu sehen ist /Mein-Konto."

  Die Suche hat außerdem eine gewisse Fehlertoleranz, zum Beispiel bei Groß- und Kleinschreibung: "Der Shop hat weitergeleitet: angefordert war /agb, zu sehen ist /AGB."
</Note>

#### <span style={{display: 'inline-block', width: '16px', height: '16px', backgroundColor: '#cb6ce6', borderRadius: '4px', marginRight: '8px', verticalAlign: 'middle'}} />Farben & Flächen

In der **Liste Farben & Flächen (6)** wählst du die Fläche aus, die du bearbeiten möchtest, etwa Seite, Karten, Topbar, Header, Navigation, Sidebar oder Footer. Insgesamt gibt es elf Flächen sowie den übergeordneten Bereich "Global". Angezeigt werden dabei alle aktuell zum Editieren verfügbaren Flächen. Diese können sich abhängig von der Seiten-Vorschau bzw. der aufgerufenen URL dynamisch ändern.

<Note>
  "Global" zeigt im Editor-Panel alle übergeordneten Optionen gesammelt an. Hier lassen sich übergeordnete Farben, Styles und Details gemeinsam für alle Flächen ändern. Wählst du danach eine der darunterliegenden Kategorien aus, überschreibt deine Einstellung dort die globale Einstellung nur für diese Auswahl.
</Note>

<Tip>
  Klickst du auf ein Element in der Live-Vorschau, springt die Auswahl automatisch auf die zuständige Fläche und zeigt dir die passenden Einstellungen. Jede Änderung ist sofort sichtbar, gespeichert wird aber erst über den Speichern-Button. Fährst du mit der Maus über eine Farbzeile, markiert die Vorschau gestrichelt und orange alle Stellen, an denen diese Farbe wirkt, und zeigt dir zusätzlich die Anzahl der betroffenen Stellen an, damit du sie nicht mit der aktuellen Auswahl verwechselst.

  <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
    <Frame>
      <img src="https://mintcdn.com/dzm/EaQjwIOo3vUgpmVw/images/niu-plus-styleshub-editor-panel-hover-highlight.png?fit=max&auto=format&n=EaQjwIOo3vUgpmVw&q=85&s=663a395cdc1d33d913a84bcb8548a221" alt="Hover über eine Rolle im Editor-Panel hebt alle betroffenen Stellen in der Vorschau hervor" width="1876" height="1306" data-path="images/niu-plus-styleshub-editor-panel-hover-highlight.png" />
    </Frame>
  </div>
</Tip>

#### <span style={{display: 'inline-block', width: '16px', height: '16px', backgroundColor: '#cb6ce6', borderRadius: '4px', marginRight: '8px', verticalAlign: 'middle'}} />Bereiche

Darunter findest du unter **Bereiche (7)** einzelne Komponenten innerhalb einer Fläche, zum Beispiel den Header, für die du gezielt Anpassungen vornehmen kannst. Hier lassen sich alle Einstellungen ändern, die du auch im Backend in der Companion App findest, du musst also nicht zwischen StylesHub und Companion App hin und her wechseln.

<Note>
  Kopfzeile, Topbar, Navigation, Footer, Sidebar, Artikelkarten, Produktseite, Warenkorb, Bestellvorgang, Slider und Suchfeld öffnen dabei ihre gewohnte Admin-Ansicht direkt im Editor-Panel. Nach dem Speichern lädt die Live-Vorschau neu, damit du das Ergebnis siehst.
</Note>

#### <span style={{display: 'inline-block', width: '16px', height: '16px', backgroundColor: '#cb6ce6', borderRadius: '4px', marginRight: '8px', verticalAlign: 'middle'}} />Eigenes CSS

Ganz unten in der Bereichsliste findest du außerdem die Option **Eigenes CSS**. Sie öffnet die `custom.css` deines aktiven Themes direkt im Editor, im Child-Setup also die `custom.css` des Childs, nicht die des Eltern-Templates. Welche Datei du gerade bearbeitest, steht dir jederzeit in der Zustandszeile über dem Editor.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/nmdf6ekQwhDd9v_Q/images/niu-plus-styleshub-eigenes-css.png?fit=max&auto=format&n=nmdf6ekQwhDd9v_Q&q=85&s=df7ddb99e98c07a67a9b974785b61326" alt="Eigenes CSS" width="2196" height="602" data-path="images/niu-plus-styleshub-eigenes-css.png" />
  </Frame>
</div>

**Live-Vorschau:** Was du im Editor tippst, wirkt sofort im Vorschaufenster daneben, ganz ohne zu speichern, ohne Neuladen und ohne dass dabei etwas zum Server geht. Gespeichert wird über den zentralen Speichern-Knopf der Werkzeugleiste, denselben wie für alle anderen Bereiche im StylesHub.

**Selektor-Picker:** Über **Element auswählen** aktivierst du den Auswahlmodus. Ein Klick auf ein Element im Vorschaufenster baut daraus dessen Vorfahrenkette als Reihe von Bausteinen: jedes Glied einzeln anklickbar, jede Klasse einzeln abwählbar, um den Selektor gezielt einzugrenzen oder zu erweitern. Daneben zeigt dir die Trefferzahl, wie viele Elemente der aktuelle Selektor gerade trifft, zum Beispiel "1 Treffer" oder "25 Treffer". Über die Schaltflächen **Selektor** und **Regel** fügst du den aufgebauten Selektor bzw. ein fertiges Regelgerüst an der aktuellen Cursorposition im Editor ein.

**Konfliktschutz:** Ändert jemand die Datei per FTP, während der Editor geöffnet ist, wird beim Speichern nichts überschrieben. Du bekommst stattdessen die Wahl zwischen **Fremden Stand laden** (übernimmt die extern geänderte Version in den Editor) und **Trotzdem überschreiben** (speichert deine Version und überschreibt die externe Änderung).

<Note>
  Beim Speichern legt der Editor außerdem immer eine Sicherungskopie `custom.css.bak` an.
</Note>

<Note>
  Regeln aus der Ansicht [Custom CSS](/NIU-Plus/custom-css) liegen weiterhin inline im Seitenkopf und gewinnen bei gleicher Spezifität gegen diese Datei.
</Note>

<Tip>
  Die `custom.css` ist im Child-Repo versioniert. Ein normaler Pull lässt Änderungen, die du hier vorgenommen hast, unangetastet stehen. Ein harter Reset beim Deployment wirft sie dagegen weg. Ausführliche Informationen dazu findest du in `NIUplusChild/docs/custom-css.md`.
</Tip>

### <span style={{display: 'inline-block', width: '16px', height: '16px', backgroundColor: '#38b6ff', borderRadius: '4px', marginRight: '8px', verticalAlign: 'middle'}} />Editor-Panel

#### Global

Wählst du bei **Farben & Flächen (6)** "Global" aus, zeigt dir das Editor-Panel die Reiter Farben, Styles und Details. Hier änderst du die Einstellungen für alle Flächen gemeinsam übergeordnet.

**Farben:** Grundfarben, Signalfarben und Signal-Hintergründe. Näheres zu den Farben findest du auf der Seite [Variablen](/NIU-Plus/variablen).

<AccordionGroup>
  <Accordion title="Grundfarben">
    <ParamField path="Primärfarbe" type="color">
      Hauptfarbe deines Shops, etwa für den Primär-Button.
    </ParamField>

    <ParamField path="Sekundärfarbe" type="color">
      Zweite Grundfarbe, etwa für Sekundär-Buttons.
    </ParamField>

    <ParamField path="Tertiärfarbe" type="color">
      Dritte Grundfarbe, etwa für Tertiär-Buttons.
    </ParamField>

    <ParamField path="Akzentfarbe 1" type="color">
      Erste Akzentfarbe für zusätzliche Gestaltungselemente.
    </ParamField>

    <ParamField path="Akzentfarbe 2" type="color">
      Zweite Akzentfarbe für zusätzliche Gestaltungselemente.
    </ParamField>
  </Accordion>

  <Accordion title="Signalfarben">
    <ParamField path="Success" type="color">
      Farbe für positive Rückmeldungen, etwa erfolgreiche Aktionen.
    </ParamField>

    <ParamField path="Warning" type="color">
      Farbe für Warnhinweise.
    </ParamField>

    <ParamField path="Danger" type="color">
      Farbe für Fehler- und Gefahrenhinweise.
    </ParamField>

    <ParamField path="Info" type="color">
      Farbe für allgemeine Hinweise.
    </ParamField>
  </Accordion>

  <Accordion title="Signal-Hintergründe">
    <ParamField path="Success Hintergrund" type="color">
      Hintergrundfarbe zur Success-Farbe, standardmäßig automatisch abgeleitet.
    </ParamField>

    <ParamField path="Warning Hintergrund" type="color">
      Hintergrundfarbe zur Warning-Farbe, standardmäßig automatisch abgeleitet.
    </ParamField>

    <ParamField path="Danger Hintergrund" type="color">
      Hintergrundfarbe zur Danger-Farbe, standardmäßig automatisch abgeleitet.
    </ParamField>

    <ParamField path="Info Hintergrund" type="color">
      Hintergrundfarbe zur Info-Farbe, standardmäßig automatisch abgeleitet.
    </ParamField>
  </Accordion>
</AccordionGroup>

**Styles:** Theme, Buttons, Eingabefelder, Elemente und Kartenstile.

<AccordionGroup>
  <Accordion title="Theme">
    <ParamField path="Theme 2.0 aktivieren" type="boolean">
      Schaltet Theme 2.0 mit dem Flächen- und Rollen-System für deinen Shop ein.
    </ParamField>

    <ParamField path="Dark-Modus aktivieren" type="boolean">
      Schaltet den Dunkelmodus für deinen Shop frei.
    </ParamField>

    <ParamField path="Standard-Modus" type="select">
      Legt fest, ob der Shop standardmäßig im Hell- oder Dunkelmodus startet.
    </ParamField>

    <ParamField path="Umschalter im Shop anzeigen" type="boolean">
      Zeigt Besuchern einen Umschalter für Hell- und Dunkelmodus im Frontend an.
    </ParamField>
  </Accordion>

  <Accordion title="Buttons">
    <ParamField path="Primär Button" type="select">
      Farbrolle für den Primär-Button, standardmäßig automatisch aus der Primärfarbe abgeleitet.
    </ParamField>

    <ParamField path="Sekundär Button" type="select">
      Farbrolle für den Sekundär-Button, standardmäßig automatisch aus der Sekundärfarbe abgeleitet.
    </ParamField>

    <ParamField path="Tertiär Button" type="select">
      Farbrolle für den Tertiär-Button, standardmäßig automatisch aus der Tertiärfarbe abgeleitet.
    </ParamField>

    <ParamField path="Warenkorb Button" type="select">
      Farbrolle für den Warenkorb-Button.
    </ParamField>

    <ParamField path="Zur Kasse Button" type="select">
      Farbrolle für den Zur-Kasse-Button.
    </ParamField>

    <ParamField path="Quickbuy Button" type="select">
      Farbrolle für den Quickbuy-Button.
    </ParamField>

    <ParamField path="Footer Topbar Button" type="select">
      Farbrolle für Buttons in der Footer-Topbar.
    </ParamField>

    <ParamField path="Accent Button 1" type="select">
      Farbrolle für den ersten Accent-Button.
    </ParamField>
  </Accordion>

  <Accordion title="Eingabefelder">
    <ParamField path="Rahmenführung" type="select">
      Legt fest, wie Eingabefelder umrandet werden, etwa umrandet oder nur mit Unterstrich.
    </ParamField>

    <ParamField path="Suchfeld" type="select">
      Legt fest, ob das Suchfeld dem Stil der Eingabefelder folgt oder eigene Werte nutzt.
    </ParamField>

    <ParamField path="Rahmenbreite" type="select">
      Legt die Breite des Rahmens für Eingabefelder fest.
    </ParamField>
  </Accordion>

  <Accordion title="Elemente">
    <ParamField path="Produkttitel-Farbe" type="select">
      Legt fest, ob der Produkttitel in der Textfarbe oder einer anderen Rolle erscheint.
    </ParamField>

    <ParamField path="Auswahl-Markierung" type="select">
      Legt fest, wie deutlich ausgewählte Elemente hervorgehoben werden, von dezent bis Akzent.
    </ParamField>
  </Accordion>

  <Accordion title="Kartenstile">
    <ParamField path="Standard-Kartenstil" type="select">
      Legt den globalen Standard-Kartenstil fest, etwa ohne Kartenstil oder mit Schatten.
    </ParamField>
  </Accordion>
</AccordionGroup>

**Details:** Radius und Feldschatten.

<AccordionGroup>
  <Accordion title="Radius">
    <ParamField path="Basisradius" type="string">
      Grundwert für Rundungen im Shop. Erlaubt sind 1 bis 4 Werte, je Wert 0 oder eine Zahl mit px, rem oder em, zum Beispiel `8px`, `0` oder `10px 5px 0`.
    </ParamField>

    <ParamField path="Flächen & Karten" type="select">
      Rundung für Flächen und Karten, folgt standardmäßig dem Basisradius oder nutzt einen eigenen Wert.
    </ParamField>

    <ParamField path="Bedienelemente" type="select">
      Rundung für Bedienelemente wie Buttons, folgt dem Basisradius oder nutzt einen eigenen Wert.
    </ParamField>

    <ParamField path="Eingabefelder" type="select">
      Rundung für Eingabefelder, folgt dem Basisradius oder nutzt einen eigenen Wert.
    </ParamField>

    <ParamField path="Marker" type="select">
      Rundung für Marker, folgt dem Basisradius oder nutzt einen eigenen Wert.
    </ParamField>

    <ParamField path="Medien & Kacheln" type="select">
      Rundung für Medien und Kacheln, folgt dem Basisradius oder nutzt einen eigenen Wert.
    </ParamField>

    <ParamField path="Quickbuy-Button" type="select">
      Rundung für den Quickbuy-Button, folgt standardmäßig den Bedienelementen.
    </ParamField>

    <ParamField path="Galerie-Kachel (Produktdetail)" type="select">
      Rundung für die Galerie-Kachel auf der Produktdetailseite, folgt standardmäßig Medien & Kacheln.
    </ParamField>

    <ParamField path="Galerie-Thumbnails" type="select">
      Rundung für die Galerie-Thumbnails, standardmäßig ohne Rundung.
    </ParamField>
  </Accordion>

  <Accordion title="Feld-Schatten">
    <ParamField path="Versatz X" type="number">
      Horizontaler Versatz des Schattens bei Eingabefeldern.
    </ParamField>

    <ParamField path="Versatz Y" type="number">
      Vertikaler Versatz des Schattens bei Eingabefeldern.
    </ParamField>

    <ParamField path="Weichheit" type="number">
      Weichzeichnung des Schattens.
    </ParamField>

    <ParamField path="Ausdehnung" type="number">
      Ausdehnung des Schattens.
    </ParamField>

    <ParamField path="Art" type="select">
      Legt fest, ob der Schatten außen oder innen liegt.
    </ParamField>
  </Accordion>
</AccordionGroup>

#### Seite (Grundfläche)

Wählst du bei **Farben & Flächen (6)** die Fläche "Seite" aus, zeigt dir das **Editor-Panel (8)** deren Grundfläche und Rollen.

<Note>
  Rollen sind die Farben, die sich innerhalb einer Fläche aus deren Grundfläche ableiten, etwa für Text, Rahmen oder Hover-Zustände. Anstatt jede Farbe einzeln festzulegen, definierst du so für jede Fläche einheitliche Farbrollen, die sich automatisch berechnen lassen oder individuell überschrieben werden können.
</Note>

Neben Hintergrund und den einzelnen Rollen zeigt dir das Editor-Panel jeweils an, wie oft die Einstellung auf der aktuell angezeigten Seite vorkommt, etwa "1 Stelle". Wird sie auf dieser Seite gar nicht verwendet, steht dort stattdessen "auf dieser Seite nicht sichtbar".

<AccordionGroup>
  <Accordion title="Seite (Grundfläche)">
    <ParamField path="Hintergrund" type="color">
      Hintergrundfarbe der ausgewählten Fläche.
    </ParamField>
  </Accordion>

  <Accordion title="Rollen">
    <ParamField path="Text" type="color">
      Farbe für Fließtext, standardmäßig automatisch aus dem Hintergrund abgeleitet.
    </ParamField>

    <ParamField path="Text gedämpft" type="color">
      Farbe für weniger wichtigen Text, etwa Nebeninformationen.
    </ParamField>

    <ParamField path="Überschriften" type="color">
      Farbe für Überschriften.
    </ParamField>

    <ParamField path="Akzent" type="color">
      Akzentfarbe für hervorgehobene Elemente innerhalb der Fläche.
    </ParamField>

    <ParamField path="Rahmen/Trenner" type="color">
      Farbe für Rahmen und Trennlinien.
    </ParamField>

    <ParamField path="Hover-Hintergrund" type="color">
      Hintergrundfarbe beim Überfahren mit der Maus.
    </ParamField>

    <ParamField path="Schatten" type="string">
      Schattenfarbe der Fläche, als RGBA-Wert.
    </ParamField>

    <ParamField path="Eingabefeld Hintergrund" type="color">
      Hintergrundfarbe von Eingabefeldern innerhalb der Fläche.
    </ParamField>

    <ParamField path="Eingabefeld Text" type="color">
      Textfarbe in Eingabefeldern.
    </ParamField>

    <ParamField path="Eingabefeld Rahmen" type="color">
      Rahmenfarbe von Eingabefeldern.
    </ParamField>

    <ParamField path="Eingabefeld Placeholder" type="color">
      Farbe des Platzhaltertexts in Eingabefeldern.
    </ParamField>

    <ParamField path="Eingabefeld Fokus" type="color">
      Farbe von Eingabefeldern im fokussierten Zustand.
    </ParamField>

    <ParamField path="Eingabefeld deaktiviert (Hintergrund)" type="color">
      Hintergrundfarbe von deaktivierten Eingabefeldern.
    </ParamField>
  </Accordion>
</AccordionGroup>

Du kannst bei Hintergrund und jeder Rolle jeweils wählen zwischen "Automatisch" (die Farbe wird berechnet), einer der Grundfarben wie Primär-, Sekundär- oder Tertiärfarbe, dem Hintergrund einer anderen Fläche wie "Seiten-Hintergrund", oder "Eigene Farbe" für einen individuellen Wert. Bei der Fläche "Topbar" steht der Hintergrund zum Beispiel standardmäßig auf "Tertiärfarbe", bei der Fläche "Header" auf "Seiten-Hintergrund".

Manche Flächen haben zusätzlich eigene Reiter **Styles** und **Details** mit fläche-spezifischen Einstellungen.

#### Karten

Die Fläche Karten ist ein Beispiel dafür:

<AccordionGroup>
  <Accordion title="Styles: Kartenstile">
    <ParamField path="Standard-Kartenstil" type="select">
      Legt den Kartenstil für diese Fläche fest.
    </ParamField>
  </Accordion>

  <Accordion title="Styles: Artikelbilder">
    <ParamField path="Bild-Kachel" type="select">
      Legt den Kartenstil für die Bild-Kachel fest.
    </ParamField>

    <ParamField path="Bild-Effekt" type="select">
      Legt den Effekt beim Überfahren des Artikelbilds fest.
    </ParamField>
  </Accordion>

  <Accordion title="Styles: Warenkorb">
    <ParamField path="Warenkorbübersicht" type="select">
      Kartenstil der Warenkorbübersicht.
    </ParamField>

    <ParamField path="„Weiter zum Checkout“-Box" type="select">
      Kartenstil der Box "Weiter zum Checkout".
    </ParamField>

    <ParamField path="Gratisgeschenke-Box" type="select">
      Kartenstil der Gratisgeschenke-Box.
    </ParamField>
  </Accordion>

  <Accordion title="Styles: Produktseite">
    <ParamField path="Buybox" type="select">
      Kartenstil der Buybox.
    </ParamField>

    <ParamField path="Productinfo-Nav (Container)" type="select">
      Kartenstil des Productinfo-Nav-Containers.
    </ParamField>

    <ParamField path="Downloads- und Medien-Box" type="select">
      Kartenstil der Downloads- und Medien-Box.
    </ParamField>

    <ParamField path="„Zusätzliche Artikel“-Box" type="select">
      Kartenstil der Box "Zusätzliche Artikel".
    </ParamField>

    <ParamField path="Stücklisten- und Bundle-Hinweis" type="select">
      Kartenstil des Stücklisten- und Bundle-Hinweises.
    </ParamField>
  </Accordion>

  <Accordion title="Styles: Kategorie & Artikellisten">
    <ParamField path="Artikelkarten" type="select">
      Kartenstil der Artikelkarten in Listen und Kategorien.
    </ParamField>

    <ParamField path="Artikelkarten in der Sidebar" type="select">
      Kartenstil der Artikelkarten innerhalb der Sidebar, folgt standardmäßig den Artikelkarten.
    </ParamField>

    <ParamField path="Unterkategorie-Karte (1. Ebene, Desktop)" type="select">
      Kartenstil der Unterkategorie-Karten der ersten Ebene am Desktop.
    </ParamField>

    <ParamField path="Unterkategorie-Karte (1. Ebene, Mobil)" type="select">
      Kartenstil der Unterkategorie-Karten der ersten Ebene mobil.
    </ParamField>

    <ParamField path="Unterkategorie-Karte (tiefere Ebenen, Desktop)" type="select">
      Kartenstil der Unterkategorie-Karten tieferer Ebenen am Desktop.
    </ParamField>

    <ParamField path="Unterkategorie-Karte (tiefere Ebenen, Mobil)" type="select">
      Kartenstil der Unterkategorie-Karten tieferer Ebenen mobil.
    </ParamField>
  </Accordion>

  <Accordion title="Styles: Bestellvorgang">
    <ParamField path="Klappbare Karten im Bestellvorgang" type="select">
      Kartenstil der klappbaren Karten im Bestellvorgang, folgt standardmäßig dem globalen Standard.
    </ParamField>

    <ParamField path="Artikelpositionen im Bestellvorgang" type="select">
      Kartenstil der Artikelpositionen im Bestellvorgang, folgt standardmäßig dem globalen Standard.
    </ParamField>
  </Accordion>

  <Accordion title="Details: Schatten (Ruhe)">
    <ParamField path="Versatz X" type="number">
      Horizontaler Versatz des Kartenschattens im Ruhezustand.
    </ParamField>

    <ParamField path="Versatz Y" type="number">
      Vertikaler Versatz des Kartenschattens im Ruhezustand.
    </ParamField>

    <ParamField path="Weichheit" type="number">
      Weichzeichnung des Kartenschattens im Ruhezustand.
    </ParamField>

    <ParamField path="Ausdehnung" type="number">
      Ausdehnung des Kartenschattens im Ruhezustand.
    </ParamField>
  </Accordion>

  <Accordion title="Details: Schatten (Überfahren)">
    <ParamField path="Versatz X" type="number">
      Horizontaler Versatz des Kartenschattens beim Überfahren mit der Maus.
    </ParamField>

    <ParamField path="Versatz Y" type="number">
      Vertikaler Versatz des Kartenschattens beim Überfahren mit der Maus.
    </ParamField>

    <ParamField path="Weichheit" type="number">
      Weichzeichnung des Kartenschattens beim Überfahren mit der Maus.
    </ParamField>

    <ParamField path="Ausdehnung" type="number">
      Ausdehnung des Kartenschattens beim Überfahren mit der Maus.
    </ParamField>
  </Accordion>

  <Accordion title="Details: Maße">
    <ParamField path="Polsterung" type="string">
      Innenabstand der Karte.
    </ParamField>

    <ParamField path="Kachel-Innenabstand" type="select">
      Innenabstand von Kacheln innerhalb der Karte, standardmäßig automatisch.
    </ParamField>

    <ParamField path="Kachel-Radius" type="select">
      Rundung von Kacheln innerhalb der Karte, folgt standardmäßig dem Medien- bzw. Karten-Radius.
    </ParamField>
  </Accordion>

  <Accordion title="Details: Radius">
    <ParamField path="Flächen & Karten" type="select">
      Rundung der Karte, folgt standardmäßig der Basis.
    </ParamField>
  </Accordion>
</AccordionGroup>

Andere Flächen folgen demselben Muster mit Farben (Hintergrund und Rollen) sowie eigenen Styles- und teils Details-Reitern, haben dabei aber unterschiedlich viele fläche-spezifische Einstellungen.

#### Topbar

Im Reiter Farben legst du den Hintergrund sowie die Rollen der Topbar fest, also Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten und die Eingabefeld-Rollen. Zusätzlich hat die Topbar einen eigenen Styles-Reiter mit fläche-spezifischen Kartenstil-Einstellungen.

#### Header

Im Reiter Farben legst du den Hintergrund sowie die Rollen des Headers fest, also Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten und die Eingabefeld-Rollen. Zusätzlich hat der Header einen eigenen Styles-Reiter mit fläche-spezifischen Kartenstil-Einstellungen.

#### Navigation

Im Reiter Farben legst du den Hintergrund sowie die Rollen der Navigation fest, also Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten und die Eingabefeld-Rollen. Zusätzlich hat die Navigation einen eigenen Styles-Reiter mit fläche-spezifischen Kartenstil-Einstellungen.

#### Footer Topbar

Im Reiter Farben legst du den Hintergrund sowie die Rollen der Footer Topbar fest, also Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten und die Eingabefeld-Rollen. Zusätzlich hat die Footer Topbar einen eigenen Styles-Reiter mit fläche-spezifischen Kartenstil-Einstellungen.

#### Footer Hauptbereich

Im Reiter Farben legst du den Hintergrund sowie die Rollen des Footer Hauptbereichs fest, also Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten und die Eingabefeld-Rollen. Zusätzlich hat der Footer Hauptbereich einen eigenen Styles-Reiter mit fläche-spezifischen Kartenstil-Einstellungen.

#### Checkout-Bestellübersicht

Die Fläche Checkout-Bestellübersicht hat keinen eigenen Details-Reiter, dafür einen schlankeren Styles-Reiter:

<AccordionGroup>
  <Accordion title="Styles: Kartenstile im Bestellvorgang">
    <ParamField path="Klappbare Karten im Bestellvorgang" type="select">
      Kartenstil der klappbaren Karten im Bestellvorgang, folgt standardmäßig dem globalen Standard.
    </ParamField>

    <ParamField path="Artikelpositionen im Bestellvorgang" type="select">
      Kartenstil der Artikelpositionen im Bestellvorgang, folgt standardmäßig dem globalen Standard.
    </ParamField>
  </Accordion>
</AccordionGroup>

#### Sidebar

Die Fläche Sidebar hat im Reiter Farben den generischen Hintergrund und die Rollen. Im Styles-Reiter findest du eine einzelne fläche-spezifische Einstellung:

<AccordionGroup>
  <Accordion title="Styles: Kartenstile">
    <ParamField path="Artikelkarten in der Sidebar" type="select">
      Kartenstil der Artikelkarten innerhalb der Sidebar, standardmäßig "Wie Artikelkarten (Standard)".
    </ParamField>
  </Accordion>
</AccordionGroup>

#### Overlay (Modal, Dropdown, Toast)

Die Fläche Overlay bündelt die Gestaltung von Modals, Dropdowns und Toasts. Sie hat ebenfalls den generischen Reiter Farben mit Hintergrund und Rollen, aber keinen eigenen Styles-Reiter. Stattdessen gibt es einen Details-Reiter:

<AccordionGroup>
  <Accordion title="Details: Radius">
    <ParamField path="Flächen & Karten" type="select">
      Rundung von Modals, Dropdowns und Toasts, standardmäßig mit eigenem Wert.
    </ParamField>
  </Accordion>
</AccordionGroup>

<Tip>
  Das Editor-Panel passt sich dem Inhalt an: schmal bei Farbzeilen, über die volle Breite bei Formularen, wahlweise rechts oder unten angedockt (siehe Icon <Icon icon="table-cells" />). Breite und Höhe lassen sich ziehen und werden gemerkt.
</Tip>

<div style={{height: '1px', backgroundColor: 'silver', margin: '24px 0'}} />


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.