> ## 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. # Theme 2.0 (Beta) > Neues, tokenbasiertes Farb- und Gestaltungssystem für NIU Plus Theme 2.0 ist ein neues, tokenbasiertes Farbsystem (Beta). Es läuft parallel zum bisherigen Variablen-System und verändert das Frontend erst, wenn es unter **Aktivierung** eingeschaltet wird. ## Aktivierung Theme 2.0 erzeugt beim Speichern einen Satz CSS-Design-Tokens und liefert ihn im Frontend inline aus. Das bestehende Variablen-System bleibt parallel voll funktionsfähig.
Aktivierung
Gibt die generierten Tokens im Frontend aus. Solange deaktiviert, ändert sich im Frontend nichts. Erzeugt zusätzlich einen kompletten Dark-Token-Satz (wirkt über `data-theme="dark"`). Womit der Satz im Shop ausgelöst wird, steht unter **Darstellung**. *** ## Darstellung Legt fest, welcher der beiden Token-Sätze der Shop ausliefert und ob der Besucher selbst umschalten darf. Beides setzt einen aktivierten Dark-Modus voraus. Ohne ihn gibt es nur den Hell-Satz.
Darstellung
**Hell:** heutiges Verhalten. **Dunkel:** der Shop startet im Dunkelmodus. **System:** der Shop übernimmt die Einstellung des Betriebssystems bzw. Browsers des Besuchers. Hat der Besucher im Shop schon einmal selbst umgeschaltet, gilt seine Wahl, unabhängig von dieser Einstellung. Blendet einen Schalter zum Wechseln zwischen Hell und Dunkel ein. Die Wahl des Besuchers wird für ein Jahr in einem Cookie gemerkt und gilt ab dann vor dem Standard-Modus. *** ## Live-Vorschau Beispiel-Markup auf der Seiten-Fläche, gespeist aus den aktuell abgeleiteten Tokens. Funktioniert unabhängig von der Aktivierung.
Live-Vorschau Light
Live-Vorschau Dark
*** ## Presets Mitgelieferte Seed-Presets sowie eigene Presets inklusive Export und Import.
Presets
Light setzt Grundfarben und alle Light-Flächen zurück. Dark setzt nur die Dark-Flächen zurück, deine Grundfarben bleiben erhalten. Vergib einen Preset-Namen und speichere deine aktuellen Einstellungen als eigenes Preset. Lade eines deiner gespeicherten Presets. Exportiert deine aktuellen Theme-2.0-Einstellungen als Datei. Importiert eine zuvor exportierte JSON-Datei mit Theme-2.0-Einstellungen. *** ## Grundfarben Ebene 0: Aus diesen Farben leitet die Engine alle Flächen-Tokens ab.
Grundfarben
Deine drei Grundfarben, aus denen die Engine Flächen und Rollen ableitet. Zwei zusätzliche Akzentfarben für frei wählbare Rollen (z. B. bei Buttons). Die vier Signalfarben für Mitteilungen an den Nutzer. Automatisch: Pastellton aus der Signalfarbe (8 % Farbe in Weiß). Wahlweise auch eine eigene Farbe. **Optionen:** * **Automatisch** * **Eigene Farbe** *** ## Elemente Einzelne Elemente, bei denen zwei Darstellungen gleichermaßen verteidigbar sind. Gewählt wird zwischen vorhandenen Rollen, nicht zwischen Farben. Die Rolle löst je Fläche und je Light/Dark automatisch auf. Deshalb steht die Auswahl einmal für beide Modi.
Elemente
**Fließtext:** Produkttitel in Produktkacheln, Listen, Slidern und Warenkorb tragen die Textfarbe ihrer Fläche (Standard, heutiges Verhalten). **Akzent:** dieselben Titel tragen die Akzentfarbe ihrer Fläche und signalisieren damit Klickbarkeit. Die Überschrift der Produktseite bleibt in beiden Fällen unberührt. Wie deutlich ein ausgewähltes Element als ausgewählt zu erkennen ist. Betroffen sind die Kacheln für Versand- und Zahlungsart im Bestellvorgang, die Variations-Swatches auf Artikel- und Kategorieseiten, die Auswahl im Konfigurator und die Geschenk-Auswahl im Warenkorb. **Dezent:** das heutige Verhalten. Die Auswahl hebt sich zurückhaltend ab, je nach Bauteil über eine leicht abgesetzte Fläche, einen Rahmen oder den Auswahlpunkt selbst. **Akzent:** die Auswahl trägt die Akzentfarbe der Fläche, auf der sie sitzt. Kacheln aus Text werden damit gefüllt, ihre Texte leitet das Theme automatisch lesbar dazu ab. Kacheln, die ein Bild zeigen, bekommen stattdessen einen Rahmen in dieser Farbe, weil eine Füllung das Bild verdecken würde. Welche der beiden Formen ein Element bekommt, entscheidet damit das Element selbst und ist bewusst keine eigene Einstellung. Der Auswahlpunkt im Bestellvorgang bleibt in beiden Fällen als zweites Signal erhalten. *** ## Buttons Die acht Button-Rollen als eigene Theme-2.0-Farben. Light bindet an eine Grundfarbe oder eine eigene Farbe, Dark hellt dieselbe Farbe automatisch so weit auf, bis sie sich von der dunklen Seite abhebt. Die Beschriftung wird immer abgeleitet und nie eingestellt. Button-Stil (Full, Outlined, Flat, Link) und Schrift bleiben in der SCSS-Ansicht unter „Buttons"; die Eckenrundung steuert die Box „Radius" über die Familie „Bedienelemente".
Buttons
Farbe der jeweiligen Button-Rolle, für Light und Dark getrennt einstellbar (Standard: Automatisch, bindet an eine Grundfarbe, je nach Rolle z. B. Primär-, Sekundär-, Tertiärfarbe oder Success). **Optionen Light:** * **Automatisch** (zeigt die aktuell gebundene Grundfarbe an, z. B. „Automatisch (Primärfarbe)") * Primärfarbe, Sekundärfarbe, Tertiärfarbe * Akzentfarbe 1, Akzentfarbe 2 * Success, Warning, Danger, Info * Eigene Farbe **Optionen Dark:** * **Automatisch** (hellt die Light-Farbe automatisch auf) * Eigene Farbe *** ## Radius Ein Basiswert für die Eckenrundung und fünf Familien, die ihm folgen oder einen eigenen Wert tragen; drei Elemente lassen sich zusätzlich einzeln stellen. Der Radius gilt für Hell und Dunkel gleichermaßen und wird deshalb nur einmal ausgegeben. Werksstand ist der heutige Wert je Familie. Wer nichts anfasst, sieht nichts Neues.
Radius
Grundrundung des gesamten Shops. Jede Familie ohne eigenen Wert folgt ihr, ebenso die Stellen ohne eigene Familie (Fokusringe, Meldungen, Karussell-Miniaturen). Erlaubt sind 1 bis 4 Werte, je Wert 0 oder eine Zahl mit px, rem oder em, z. B. `8px`, `0` oder `0 10px 5px 0`. Für jede Familie stehen zwei Optionen zur Wahl: **Folgt der Basis** übernimmt den Wert des Basisradius, sodass eine Änderung dort automatisch in die ganze Familie durchschlägt. **Eigener Wert** entkoppelt die Familie vom Basisradius und lässt einen eigenständigen Wert zu. Bei den drei zusätzlich einzeln stellbaren Elementen (Quickbuy-Button, Galerie-Kachel, Galerie-Thumbnails) heißt die erste Option stattdessen **Auto (Bezugsfamilie)**: Sie übernehmen dann nicht den Basisradius direkt, sondern den Wert ihrer jeweiligen übergeordneten Familie. Karten, Boxen, Meldungen und Overlays (Modal, Dropdown, Toast). Dazu die Kartenstile „Schattierte Karte", „Umrandete Karte" und „Einfache Karte" sowie die Artikelkarten der Produktlisten. Bewusst nicht dabei: „Border oben/unten" (zwei waagerechte Linien haben keine Ecken) und die Panels im Bestellvorgang, die der Seite folgen und nicht der Kartenwelt. Die Radien, die pro Bereich in den Ansichten Produkt, Warenkorb und Kategorie eingestellt sind, gewinnen weiterhin. Dieser Wert greift genau dort, wo für den Bereich nichts eingestellt ist. Ein eigener Wert hier steuert zusätzlich den Kachel-Radius der Artikelkarten, sofern der auf „Automatisch" steht. Buttons, Quickbuy, Lightbox- und Modal-Schaltflächen. Löst den „Button Radius" aus der SCSS-Ansicht ab. Schnellkauf-Buttons auf den Artikelkarten inklusive Instant-Buy-Icon. Automatisch folgen sie den Bedienelementen. Ein eigenes Token wird nur bei „Eigener Wert" ausgegeben. Eingabefelder, Suchfelder und Auswahlfelder. Löst den „Border Radius" der Eingabefelder aus der SCSS-Ansicht ab und erreicht zusätzlich die Felder, die bisher am unerreichbaren Bootstrap-Wert hingen. Ribbons, Badges und Chips. Löst die beiden Ribbon-Radien aus der SCSS-Ansicht ab. Produktbilder, Bildkacheln, Galerie- und Kategoriebilder. Die beiden Elemente darunter lösen sich bei Bedarf davon. Der Kachel-Radius der Artikelkarten folgt dieser Familie, solange „Flächen & Karten" der Basis folgt. Gibt man jener Familie einen eigenen Wert, leitet er sich konzentrisch aus Karten-Radius und Kachel-Abstand ab. Große Bild-Kachel der Produktseite. Automatisch folgt sie den Medien & Kacheln. Ein eigenes Token wird nur bei „Eigener Wert" ausgegeben. Die kleinen Kacheln der Artikelkarten steuert der Kachel-Radius in der Karten-Fläche. Vorschaubilder unter dem Produktbild. Automatisch = keine Rundung. Sie folgen bewusst nicht den Medien & Kacheln, weil ein groß gedrehter Medien-Radius die kleinen Vorschaubilder fast zu Kreisen machen würde. Ein eigenes Token wird nur bei „Eigener Wert" ausgegeben. Für alle Familien gilt: Erlaubt sind 1 bis 4 Werte, je Wert 0 oder eine Zahl mit px, rem oder em, z. B. `8px`, `0` oder `0 10px 5px 0`. *** ## Eingabefelder Struktur der Eingabefelder: welche Kanten das Feld zeichnet, wie stark, und ob es einen Schatten wirft. Alles Weitere kommt aus den vorhandenen Familien und Rollen. Die Farben aus den Flächen-Boxen (Zeilen „Eingabefeld …"), die Eckenrundung aus der Box „Radius" (Familie „Eingabefelder"). Fokusform, mitlaufender Feldname sowie Fehler- und Deaktiviert-Zustand sind Folgen der Rahmenführung und haben deshalb bewusst keinen eigenen Schalter. Der Schatten steht ganz unten: seine Form hier, seine Farbe als Rolle „Schatten" der jeweiligen Fläche. Die Einstellung gilt für Hell und Dunkel gleichermaßen. Struktur hängt nicht am Licht. Werkszustand ist der heutige Look: Solange in dieser Ansicht nichts gespeichert wurde, ändert sich nichts. Mit dem ersten Speichern zieht das Suchfeld nach, siehe die Zeile „Suchfeld".
Eingabefelder
Welche Kanten das Feld zeichnet. **Umrandet:** alle vier Seiten, Fokus als Ring, der Feldname deckt beim Hochwandern die Oberkante ab, das heutige Verhalten. **Nur unten:** eine Linie unter dem Feld, Ecken gerade, der Fokus verstärkt diese Linie statt einen Ring zu setzen, der Feldname steht frei darüber. **Ohne Rahmen:** keine Linien, der Fokus zeigt sich als Ring, das ist nur dort brauchbar, wo die Feldfläche selbst sichtbar ist (eigener Eingabefeld-Hintergrund in den Flächen-Boxen), sonst verschwindet das Feld optisch. Ein Eingabefehler bekommt in beiden rahmenarmen Führungen trotzdem eine rote Unterkante, ohne ein Signal wäre er nicht erkennbar. Die Führung greift an allen Feldern, Formulare, Auswahlfelder, Mengenfelder, und auch am Suchfeld, solange die Zeile darunter nichts anderes sagt. Betrifft die Suche im Header, in der Seitenspalte und die mitlaufende Suche. Sie trug bisher immer einen Sonderlook: Ihr Rahmen ist in der Feldfarbe gemalt und damit unsichtbar. Ab dem ersten Speichern in dieser Ansicht folgt sie der oben gewählten Rahmenführung, auch bei „Umrandet" bekommt die Suche dann einen sichtbaren Rahmen. Das passiert schon, wenn hier nur die Rahmenbreite geändert und gespeichert wird: Ausschlaggebend ist das Speichern, nicht die bewusste Wahl einer Führung. Wer den bisherigen Look behalten will, wählt „Rahmenlos". Die drei Führungen darunter gelten in jedem Fall und unabhängig davon, was oben steht. Die Suche ist als einziges Feld dauerhaft in der Kopfzeile sichtbar, eine bloße Unterkante für die Formulare heißt deshalb nicht zwangsläufig, dass auch sie nur eine Linie sein soll. Stärke der Feldlinien. Automatisch heißt: die Rahmenführung entscheidet, umrandet 1 Pixel, nur unten 2 Pixel. „Ohne Rahmen (0)" nimmt dem Feld jede Linie, behält aber seine Maße; wie bei der Rahmenführung „Ohne Rahmen" ist das nur dort brauchbar, wo die Feldfläche sichtbar ist (eigener Eingabefeld-Hintergrund in den Flächen-Boxen), sonst verschwindet das Feld optisch. Zeichnet weder ein Feld noch die Suche eine Kante, ist die Breite gegenstandslos und die Zeile ausgegraut. Der eingestellte Wert bleibt erhalten und gilt wieder, sobald eine Rahmenführung Kanten zieht. Wohin der Schatten des Eingabefelds fällt: Versatz nach rechts (X) und nach unten (Y). Ab Werk hat ein Feld gar keinen Schatten, erst ein gesetzter Wert erzeugt einen. Negative Werte kehren die Richtung um. Die Farbe kommt aus der Rolle „Schatten" der Fläche, auf der das Feld steht (Flächen-Boxen, getrennt für Hell und Dunkel), ein Feld im Checkout-Panel nimmt also dessen Schattenfarbe, eines auf der Seite die der Seite. Erlaubt ist ein einzelner Wert: 0 oder eine Zahl mit px, rem oder em. Ein Minus davor ist erlaubt. Wie weit der Feldschatten ausläuft (Blur). Werkszustand ist 0, kein Schatten. Ein Minus ist hier bewusst nicht erlaubt, weil ein negativer Blur die CSS-Regel ungültig macht. In einem langen Formular stehen viele Felder gleichzeitig im Bild, sehr weiche Schatten kosten dort Rechenzeit. Erlaubt ist ein einzelner Wert: 0 oder eine Zahl mit px, rem oder em. Wie weit der Feldschatten vor dem Auslaufen verbreitet (positiv) oder eingezogen (negativ) wird, der Spread. Werkszustand ist 0. Erlaubt ist ein einzelner Wert: 0 oder eine Zahl mit px, rem oder em. Ein Minus davor ist erlaubt. Ob der Schatten außen am Feld liegt oder innen. „Außen" ist der gewohnte aufliegende Schatten. „Innen" zeichnet ihn in das Feld hinein, das ist der eingedrückte Soft-Look, bei dem die Fläche in der Seite zu versinken scheint; er braucht eine sichtbare Feldfläche (eigener Eingabefeld-Hintergrund in den Flächen-Boxen), sonst ist nichts zu sehen, worin etwas einsinken könnte. Bei automatisch ausgefüllten Feldern (Browser-Autofill) bleibt ein Innen-Schatten unsichtbar: Der Browser deckt das Feldinnere dort mit einer eigenen Füllung ab, hinter der der Schatten liegt, der Außen-Schatten wirkt an denselben Feldern normal. Die Art allein erzeugt keinen Schatten: Solange die drei Zeilen darüber leer sind, wird nichts ausgegeben, die Auswahl bleibt gespeichert und greift, sobald der erste Wert steht. Was aus den Zeilen darüber wird. Nicht ausgefüllte Felder zählen als 0, solange alle vier Werte leer sind, bleibt es beim heutigen Zustand: Eingabefelder tragen dann keinen Schatten. Der Fokus-Ring der Felder bleibt in jedem Fall erhalten: Er ist im Frontend Teil derselben Schatten-Liste und wird vom Feldschatten nicht verdrängt. *** ## Kartenstile Ein Standard-Kartenstil für den ganzen Shop und je Element die Wahl, ob es ihm folgt, einen eigenen Stil trägt oder gar keine Karte ist. Die Werte stehen weiterhin in den Ansichten Produkt, Warenkorb und Kategorie. Hier sind sie nur gesammelt und um „Automatisch" erweitert.
Kartenstile Teil 1
Gilt für jedes Element, das unten auf „Automatisch" steht. Ändert sich dieser Wert, ziehen alle Automatisch-Elemente mit. Elemente mit eigenem Stil bleiben, wo sie sind. „Ohne Rahmen, mit Polsterung" ist der Zwischenschritt zu „Ohne Kartenstil": Der Inhalt behält seine Polsterung und verzichtet auf jede Karten-Optik, keine Fläche, kein Rahmen, kein Schatten. Weil dort keine Kartenfläche entsteht, folgen die Inhalte darin der Farbwelt der Seite und nicht der der Karte. **Optionen:** Automatisch (globaler Standard), Ohne Kartenstil (Clean), Schattierte Karte (Card), Umrandete Karte (Bordered), Einfache Karte (Full), Alert Info, Alert Warning, Alert Danger, Alert Success Wohin der Schatten der schattierten Karte fällt: Versatz nach rechts (X) und nach unten (Y). Ab Werk steht er ohne Versatz mittig um die Karte, ein Hof, keine Lichtrichtung. Negative Werte kehren die Richtung um. Die Farbe des Schattens steht nicht hier, sondern als Rolle „Schatten" in den Flächen-Boxen, je Fläche und getrennt für Hell und Dunkel. Erlaubt ist ein einzelner Wert: 0 oder eine Zahl mit px, rem oder em. Ein Minus davor ist erlaubt. Wie weit der Schatten ausläuft (Blur). Werkszustand ist 1rem. Größere Werte wirken weicher und weiter entfernt, ein Minus ist hier bewusst nicht erlaubt, weil ein negativer Blur die CSS-Regel ungültig macht. Sehr weiche Schatten kosten beim Scrollen Rechenzeit, in einer Artikelliste stehen bis zu 60 Karten gleichzeitig. Erlaubt ist ein einzelner Wert: 0 oder eine Zahl mit px, rem oder em. Wie weit der Schatten vor dem Auslaufen verbreitet (positiv) oder eingezogen (negativ) wird, der Spread. Werkszustand ist 0. Ein negativer Wert zusammen mit einem Versatz ergibt den typischen abgesetzten Schatten unter der Karte. Erlaubt ist ein einzelner Wert: 0 oder eine Zahl mit px, rem oder em. Ein Minus davor ist erlaubt. Wohin der Schatten fällt, während die Maus über der Karte steht. Ab Werk hebt sich die Karte ab: 10 Pixel nach unten versetzt. Wirkt an den Karten, die heute beim Überfahren einen Schatten zeigen, welche das sind, ändert diese Einstellung nicht (die umrandeten Artikelkarten heben sich an, der Kartenstil „Schattierte Karte" bleibt in Ruhe liegen). Bleibt alles leer, bleibt der heutige Hover-Schatten stehen. Erlaubt ist ein einzelner Wert: 0 oder eine Zahl mit px, rem oder em. Ein Minus davor ist erlaubt. Wie weit der Hover-Schatten ausläuft. Werkszustand ist 30px, deutlich weicher als die Ruhe, das ist es, was das Abheben ausmacht. Ein weicher Schatten auf vielen Karten gleichzeitig kostet beim Überfahren Rechenzeit, weil die Karten den Wechsel animieren. Erlaubt ist ein einzelner Wert: 0 oder eine Zahl mit px, rem oder em. Verbreitert (positiv) oder zieht (negativ) den Hover-Schatten vor dem Auslaufen. Werkszustand ist 0. Erlaubt ist ein einzelner Wert: 0 oder eine Zahl mit px, rem oder em. Ein Minus davor ist erlaubt. Was aus den Zeilen darüber wird, links die Ruhe, rechts das Überfahren. Nicht ausgefüllte Felder springen mit dem heutigen Wert ein, solange in einem Satz alle vier leer sind, bleibt es dort beim heutigen Schatten und es wird nichts ausgegeben. Der Schatten-Raum ist der Platz, den scrollende Bereiche (Warenkorb, Sidebar-Listen) freihalten, damit der Schatten nicht an der Kante abgeschnitten wird. Er richtet sich nach dem größeren der beiden Schatten, der Hover zählt dabei erst mit, wenn er eingestellt wurde.
Kartenstile Teil 2
Wie viel Luft zwischen Kartenrand und Inhalt liegt. Box-Karten (Warenkorbübersicht, Buybox, Custom-Box-Container, Unterkategorie-Karten) polstern damit allseitig gleich. An den Artikelkarten der Listen bleibt unten ein Streifen von zusätzlich 20 Pixeln stehen, diesen größeren unteren Abstand haben die Artikelkarten seit jeher, und er bleibt erhalten, ihn beim ersten Dreh wegfallen zu lassen wäre eine Layout-Änderung, die niemand eingestellt hat. Werkszustand ist 20px 24px an der Box-Karte und 20px 20px 40px an der Artikelkarte, die vier Pixel Mehrbreite der Box-Karte entfallen beim ersten Dreh, weil der Regler allseitig gleich polstert. Nicht betroffen: die Klappkarten und Artikelzeilen im Bestellvorgang und die Artikelkarten der Sidebar, deren Polsterung steht als Utility-Klasse fest im Markup und lässt sich von hier aus nicht bewegen. Ist ein eigener Karten-Radius gesetzt, zieht dieser Wert den Kachel-Radius der Artikelkarte mit (konzentrische Ableitung). Erlaubt ist ein einzelner Wert: 0 oder eine Zahl mit px, rem oder em. **Warenkorb** Der große Container mit den Positionen auf der Warenkorbseite. Die Summen-Box rechts. Achtung: „Ohne Kartenstil" schaltet hier heute nicht auf nichts, sondern auf einen fest eingebauten Ersatzstil (heller Verlauf). Das wird mit dem Template-Teil dieses Pakets aufgelöst. **Produktseite** Der rechte Container der Artikeldetailseite mit Preis und Kauf-Button. Die Zeile mit den Custom Boxes unterhalb der Produktform. Der Stil sitzt am Container, die Boxen darin haben ihren eigenen Kartenstil im Box-Dialog. Downloadvorschau und Mediendateien auf der Artikeldetailseite (zwei Stellen, ein Wert). Die Artikelkacheln im Warenkorb-Modal. Andere Stil-Familie: Diese Stile kommen aus dzm\_resources und kennen weder Flächenrollen noch den Theme-Radius. Der Hinweis über dem Stücklisten-Slider. Nur sichtbar, wenn „Bundle Hinweis Nutzen" in der Produkt-Ansicht aktiv ist. Gleiche Stil-Familie wie die Zusatzartikel. **Optionen** (für alle Felder in Warenkorb und Produktseite, außer die beiden „(Clean)"-Felder): Automatisch (globaler Standard), Ohne Kartenstyle, Einfache Karte, Schattierte Karte, Umrandete Karte, Border oben/unten, Ohne Rahmen, mit Polsterung
Kartenstile Teil 3
**Kategorie & Artikellisten** Ein Wert für die Artikelkarten der Flächen: Kategorie- und Suchlisten und Slider. Was in der Sidebar erscheint, hat seit diesem Paket eine eigene Zeile (direkt darunter) und folgt hier, solange sie auf „Wie Artikelkarten" steht. Alles, was in der aufklappbaren Seitenspalte als Artikel gelistet wird: die Positionen im Sidebar-Warenkorb, die Cross-Selling- und Bestseller-Vorschläge darunter und die Artikellisten der Produktdetail-Sidebar (Kaufen-auch, Ähnliche, eigene Cross-Selling-Gruppen). Sie folgten bisher zwangsweise den Artikelkarten der Flächen, was in der schmalen Spalte oft zu viel Karte war. Der Werkszustand ändert daran nichts („Wie Artikelkarten"), ab jetzt lässt sich die Sidebar aber eigenständig einstellen. **Optionen:** Wie Artikelkarten (Standard), Automatisch (globaler Standard), Ohne Kartenstyle, Einfache Karte, Schattierte Karte, Umrandete Karte, Ohne Rahmen, mit Polsterung | Element | Werkszustand | | ---------------------------------------------- | ---------------- | | Unterkategorie-Karte (1. Ebene, Desktop) | Einfache Karte | | Unterkategorie-Karte (1. Ebene, Mobil) | Ohne Kartenstyle | | Unterkategorie-Karte (tiefere Ebenen, Desktop) | Ohne Kartenstyle | | Unterkategorie-Karte (tiefere Ebenen, Mobil) | Ohne Kartenstyle | **Optionen** (für alle vier Unterkategorie-Karten oben): Automatisch (globaler Standard), Ohne Kartenstyle, Einfache Karte, Schattierte Karte, Umrandete Karte, Border oben/unten, Ohne Rahmen, mit Polsterung **Bestellvorgang** Login, Adresse, Versandart, Zahlungsart und Bestätigung. Diese Karten hatten bisher gar keine Einstellung, der Rahmen stand fest im Template. Der Werkszustand ist deshalb exakt dieser Rahmen, wer nichts umstellt, sieht nichts Neues. Die Artikelzeilen und die Versandkosten-Karte im Warenkorb-Block des Bestellvorgangs, rechte Spalte am Desktop, aufklappbarer Block am Handy. Sie folgten bisher zwangsweise der Zeile darüber, das ist jetzt getrennt: Eine Klappbox ist ein Abschnitt der Seite, eine Artikelzeile eine Position in einer Liste, der eine darf umrandet sein, während die andere flach bleibt. **Optionen** (für beide Elemente oben): Wie Artikelkarten (Standard), Automatisch (globaler Standard), Ohne Kartenstyle, Einfache Karte, Schattierte Karte, Umrandete Karte, Ohne Rahmen, mit Polsterung Nicht in dieser Liste, weil sie kein einzelnes Element sind oder im Template keinen Anknüpfungspunkt haben: die Custom Boxes (Kartenstil je Box im Box-Dialog, dort ebenfalls mit „Automatisch"), die Artikelgalerie (folgt den Medien, nicht der Karte), die rechte Spalte der mobilen Bestellübersicht sowie die Info-Boxen des Shops in Seitenspalte und Inhalt (Bestseller, Sonderangebote und Ähnliches). *** ## Flächen Jede Fläche bündelt 14 Tokens. Der Hintergrund bestimmt die Quelle, alle übrigen Werte leitet die Engine automatisch ab. Einzelne Tokens lassen sich auf „Eigene Farbe" umstellen. Light und Dark sind zwei eigenständige Sätze mit gleicher Struktur; der Dark-Satz wirkt im Frontend über `data-theme="dark"`.
Flächen Light

### Seite (Grundfläche)
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
Seite (Grundfläche) ### Karten
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert, Bild-Kachel, Bild-Effekt, Kachel-Innenabstand, Kachel-Radius
Eckenrundung der Bild-Kacheln innerhalb der Karten-Fläche. **Optionen:** Auto (Medien- bzw. Karten-Radius), Eigener Wert Karten ### Checkout-Bestellübersicht
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
Checkout-Bestellübersicht ### Topbar
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
Topbar ### Header
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
Header ### Navigation
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
Navigation ### Sidebar
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
Sidebar ### Footer Topbar
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
Footer Topbar ### Footer Hauptbereich
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
Footer Hauptbereich ### Footer Bottombar
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
Footer Bottombar ### Overlay (Modal, Dropdown, Toast)
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
Overlay
Flächen Dark

Der Dark-Satz folgt derselben Struktur wie Light: dieselben 11 Flächen, dieselben 14 Tokens je Fläche. Jede Fläche lässt sich unabhängig vom Light-Satz übersteuern. Eigene Screenshots je Fläche liegen für Dark nicht vor, der Aufbau der Einstellungen entspricht dem der Light-Accordions oben. ### Seite (Grundfläche)
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
### Karten
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert, Bild-Kachel, Bild-Effekt, Kachel-Innenabstand, Kachel-Radius
### Checkout-Bestellübersicht
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
### Topbar
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
### Header
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
### Navigation
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
### Sidebar
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
### Footer Topbar
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
### Footer Hauptbereich
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
### Footer Bottombar
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert
### Overlay (Modal, Dropdown, Toast)
Hintergrund, Text, Text gedämpft, Überschriften, Akzent, Rahmen/Trenner, Hover-Hintergrund, Schatten, Eingabefeld Hintergrund, Eingabefeld Text, Eingabefeld Rahmen, Eingabefeld Placeholder, Eingabefeld Fokus, Eingabefeld deaktiviert