Fortgeschrittenes CSS und stabile Klassen

Wenn die Tokens nicht reichen — ein Element ausblenden, ein anderes verschieben, ein ganz eigenes Detail — kannst du CSS direkt auf die Klassen des Widgets schreiben. Nur die in dieser Liste haben garantierten Support: Der Rest des Markups ist intern und kann sich ohne Ankündigung ändern.

Wo dieses CSS hingehört

In das Custom CSS des Dashboards (Darstellung → Erweitert). Das Widget lebt in einem Shadow DOM, das CSS deines Shops erreicht diese Klassen also nicht — der Editor im Dashboard injiziert deins nach innen. Die Tokens --fdl-* sind die Ausnahme: Die kannst du auch von außen deklarieren.

Klassen mit stabilem Support

Rezepte

„In den Warenkorb“ in einer Kategorie ausblenden

/* Die Produkte verlinken auf ihre Produktseite: filtere über die Kategorie-URL */
.card[href*="/geschenkkarten/"] .add-to-cart { display: none; }

Dichteres Raster auf großen Bildschirmen

@media (min-width: 1280px) {
  .grid { grid-template-columns: repeat(6, 1fr) !important; }
}

Sticky Kopfzeile beim Scrollen

.kos-search .topbar { position: sticky; top: 0; z-index: 5; }

Limits: Das Custom CSS erlaubt bis zu 100.000 Zeichen, wenn du es im Panel einfügst; kommt es über die KI-Automatisierung, liegt die Grenze bei 20.000, damit ein Mensch es prüfen kann. Regeln, deren Selektor auf die Badge-Klassen oder das Badge-Attribut zeigt (.f_brand_*, [data-findalo-brand]), werden beim Speichern GELÖSCHT —die ganze Regel, ersetzt durch einen Kommentar— und das Panel sagt dir vorher, wie viele es trifft. Es ist ein Musterfilter, keine Absichtserkennung: eine Regel, die das Badge auf anderem Weg versteckt, kommt durch den Filter, und dann schneidet der Integrity Check des Widgets sie zur Laufzeit weg.