.rbx-mk { display: grid; gap: 18px; margin: 4px 0 8px; }

  .rbx-mk__kopf {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
  }
  .rbx-mk__zaehler { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.2; }
  .rbx-mk__zaehler[data-voll] { color: rgb(var(--color-success, 16 122 76)); }
  .rbx-mk__preis { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.2; }

  /* Die Farbfamilien brechen um, statt waagerecht zu scrollen: eine Leiste,
     die nach rechts weiterlaeuft, verbirgt ihre letzten Eintraege — Schwarz
     stand nur noch angeschnitten am Rand und war leicht zu uebersehen. */
  .rbx-mk__filter {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .rbx-mk__chip {
    flex: 0 0 auto; padding: 7px 14px; border: 0; border-radius: 999px;
    background: rgb(var(--color-foreground) / 0.06); color: inherit;
    font: inherit; font-size: 13px; line-height: 1.2; cursor: pointer;
    white-space: nowrap; transition: background .15s ease, color .15s ease;
  }
  .rbx-mk__chip:hover { background: rgb(var(--color-foreground) / 0.12); }
  .rbx-mk__chip[aria-pressed='true'] {
    background: rgb(var(--color-foreground)); color: rgb(var(--color-background));
  }

  /* Gleich grosse Kacheln, 3 Spalten auf dem Handy, 5 ab Tablet — dieselbe
     Rasterlogik wie in den Box-Konfiguratoren. */
  .rbx-mk__raster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
    padding: 2px;
  }
  @media screen and (min-width: 750px) {
    .rbx-mk__raster { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }

  .rbx-mk__ton {
    display: flex; flex-direction: column; gap: 6px;
    padding: 0; border: 0; background: none; cursor: pointer;
    text-align: center; color: inherit; font: inherit;
  }
  /* Der Farbton kommt als Hintergrundbild, nicht als <img>: Shopify liefert
     die Swatch-Fotos im Querformat mit weissem Rand, ein eingesetztes Bild
     sitzt dann sichtbar schief in der quadratischen Kachel. Als Hintergrund
     mit cover fuellt der gestrichene Bereich die Flaeche zuverlaessig. */
  .rbx-mk__ton-flaeche {
    position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
    border-radius: 12px; overflow: hidden;
    background-color: rgb(var(--color-foreground) / 0.06);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground) / 0.12);
    transition: box-shadow .18s ease, transform .18s ease;
  }
  .rbx-mk__ton:hover .rbx-mk__ton-flaeche { transform: translateY(-1px); }
  .rbx-mk__ton[aria-pressed='true'] .rbx-mk__ton-flaeche {
    box-shadow: inset 0 0 0 3px rgb(var(--color-foreground));
  }
  .rbx-mk__ton[data-gesperrt='true'] { opacity: .4; }
  .rbx-mk__ton[hidden] { display: none; }

  /* Die laufende Nummer zeigt, an welcher Stelle der Ton in der Bestellung
     steht — so bleibt nachvollziehbar, welche fuenf es geworden sind. */
  .rbx-mk__nummer {
    position: absolute; top: 6px; inset-inline-end: 6px;
    display: none; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgb(var(--color-foreground)); color: rgb(var(--color-background));
    font-size: 12px; font-weight: 700; line-height: 1;
  }
  .rbx-mk__ton[aria-pressed='true'] .rbx-mk__nummer { display: flex; }

  .rbx-mk__ton-name {
    font-size: 11px; line-height: 1.2; opacity: .8;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  .rbx-mk__status { margin: 0; font-size: 13px; line-height: 1.35; opacity: .7; }
  .rbx-mk__aktion { display: grid; gap: 10px; }

  /* Solange kein Ton gewaehlt ist, steht der Button gesperrt da. Das Theme
     nimmt ihm dabei die Fuellfarbe, laesst die Schrift aber weiss — auf dem
     hellen Rest blieb „Farbton auswählen" fast unlesbar. Dunkle Schrift ist
     hier keine Deko: der Satz sagt, was als Naechstes zu tun ist. */
  .rbx-mk__aktion .button[disabled],
  .rbx-mk__aktion .button[disabled] .btn-text {
    color: #313131;
  }
  .rbx-mk__hinweis {
    margin: 0; padding: 12px 14px; border-radius: 14px;
    background: rgb(var(--color-foreground) / 0.04);
    font-size: 13px; line-height: 1.4;
  }
  /* Der Hinweis auf die Box stand als reine Textzeile da und ging zwischen
     Gutscheinkasten und Produktbeschreibung unter. Mit dem Produktfoto wird
     erkennbar, was man fuer die 34,90 € bekommt. */
  .rbx-mk__box {
    display: flex; align-items: center; gap: 14px;
    padding: 10px; border-radius: 16px;
    color: inherit; text-decoration: none;
    transition: background .15s ease;
  }
  .rbx-mk__box:hover { background: rgb(var(--color-foreground) / 0.04); }
  .rbx-mk__box-bild {
    flex: 0 0 auto; width: 72px; height: 72px;
    border-radius: 12px; object-fit: cover; display: block;
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground) / 0.12);
  }
  .rbx-mk__box-text { font-size: 13px; line-height: 1.4; }
  .rbx-mk__box-name { display: block; font-weight: 700; }
  .rbx-mk__box:hover .rbx-mk__box-name { text-decoration: underline; }