.rbx-wf { display: grid; gap: 20px; margin: 8px 0 4px; }

  /* --- Ergebnisfeld ---------------------------------------------------------
     Der gewaehlte Ton ist das Produkt. Er steht jetzt im zweiten Kasten direkt
     unter den Reglern: Wer dort dreht, sieht die Probe mitgehen, ohne zu
     scrollen. */
  .rbx-wf__ergebnis {
    display: grid; grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px; align-items: center;
    padding: 14px; border-radius: 18px;
    background: rgb(var(--color-foreground) / 0.04);
  }
  .rbx-wf__probe {
    width: 96px; height: 96px; border-radius: 14px;
    background: #d8cec3;
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground) / 0.14);
    transition: background .2s ease;
  }
  .rbx-wf__ergebnis-text { display: grid; gap: 4px; min-width: 0; }
  /* Menge und Material sitzen als drittes Kind in derselben Box, ueber die volle Breite
     unter Probe und Text. Der Strich trennt die Angabe des Tons von der Entscheidung
     darueber — ohne Auswahl gibt es nichts zu trennen, dann faellt er weg. */
  .rbx-wf__wahl {
    grid-column: 1 / -1;
    display: grid; gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgb(var(--color-foreground) / 0.10);
  }
  .rbx-wf__wahl:empty { display: none; }
  .rbx-wf__ton-name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; }
  .rbx-wf__hex {
    margin: 0; font-size: 13px; line-height: 1.3; opacity: .65;
    font-variant-numeric: tabular-nums; letter-spacing: .04em;
  }
  .rbx-wf__naeh { margin: 0; font-size: 13px; line-height: 1.4; }
  .rbx-wf__naeh a { color: inherit; }
  .rbx-wf__punkt {
    display: inline-block; width: 11px; height: 11px; border-radius: 50%;
    vertical-align: -1px; margin-inline-end: 5px;
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground) / 0.2);
  }

  /* Wenn der Wunschton praktisch ein Serienton ist, ist Anmischen rausgeworfenes
     Geld — dann sagt das Feld das deutlich, statt es zu verschweigen. */
  .rbx-wf__treffer {
    margin: 0; padding: 12px 14px; border-radius: 14px;
    background: rgb(var(--color-foreground) / 0.06);
    font-size: 13px; line-height: 1.45;
  }
  .rbx-wf__treffer[hidden] { display: none; }
  .rbx-wf__treffer strong { font-weight: 700; }

  /* --- Die zwei Karten ------------------------------------------------------
     Vorher: eine Schrittleiste, darunter zwei Kacheln zur Wegwahl, darunter zwei
     Tafeln, von denen immer eine versteckt war. Wer die Regler wollte, musste
     erst wissen, dass es sie gibt.

     Jetzt zwei Kaesten, beide Wege offen: oben das Foto mit seinen drei
     Schritten, unten die Regler. Die Regler stehen dauerhaft da und zeigen immer
     den Ton, der gerade gilt — auch den, der aus dem Foto kam. Damit ist der
     zweite Kasten nicht mehr die Alternative zum ersten, sondern seine
     Feinjustage. */
  .rbx-wf__karte {
    display: grid; gap: 14px;
    padding: 18px; border-radius: 20px;
    background: rgb(var(--color-foreground) / 0.045);
  }
  /* Im Kasten braucht die Schrittzeile keinen eigenen Grund mehr — sonst steht
     ein Kasten im Kasten. Die Ziffer traegt die Hervorhebung allein. */
  .rbx-wf__karte .rbx-wf__schritt { background: transparent; padding: 2px 0; }
  .rbx-wf__karte .rbx-wf__schritt[data-jetzt='true'] { background: transparent; }
  .rbx-wf__tafel[hidden] { display: none; }
  .rbx-wf__tafel { display: grid; gap: 14px; }

  /* --- Foto ----------------------------------------------------------------
     Kamera und Dateiwahl stehen getrennt nebeneinander — am Telefon sind das
     zwei verschiedene Absichten, und ein gemeinsamer Knopf zwingt zu einem
     Zwischenmenue. Der Papierhinweis steht mit im Feld, nicht darunter. */
  .rbx-wf__fotobox {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 18px 16px; border-radius: 18px;
    border: 1px dashed rgb(var(--color-foreground) / 0.28);
    text-align: center;
    transition: background .15s ease, border-color .15s ease;
  }
  .rbx-wf__fotobox-text { font-size: 13px; line-height: 1.35; opacity: .75; }
  .rbx-wf__fotoknoepfe {
    display: grid; gap: 8px; width: 100%; max-width: 420px;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  }
  .rbx-wf__fotoknopf {
    position: relative; display: block; padding: 10px 12px; border-radius: 999px;
    background: rgb(var(--color-foreground) / 0.08);
    font-size: 13.5px; line-height: 1.2; cursor: pointer;
    transition: background .15s ease;
  }
  .rbx-wf__fotoknopf:hover { background: rgb(var(--color-foreground) / 0.16); }
  .rbx-wf__fotoknopf input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

  /* Der Hinweis zum weissen Papier steht im Ablagefeld statt darunter: Dort wird
     er gelesen, bevor jemand fotografiert — darunter erst danach. */
  .rbx-wf__papier {
    margin: 0; max-width: 52ch;
    font-size: 12.5px; line-height: 1.45; opacity: .7;
  }

  .rbx-wf__buehne { position: relative; display: none; }
  .rbx-wf__buehne[data-da='true'] { display: block; }
  .rbx-wf__leinwand {
    display: block; width: 100%; height: auto; border-radius: 16px;
    cursor: crosshair; touch-action: manipulation;
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground) / 0.12);
  }
  /* Das Fadenkreuz sitzt ueber dem Bild statt im Bild: eingezeichnete Marken
     muessten bei jedem Tippen das ganze Foto neu zeichnen, und die Farbprobe
     wuerde beim zweiten Tippen die eigene Marke messen. */
  .rbx-wf__marke {
    position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
    border-radius: 50%; pointer-events: none; display: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, .55);
  }
  .rbx-wf__marke[data-da='true'] { display: block; }
  .rbx-wf__marke--papier { border-radius: 6px; }

  .rbx-wf__anweisung {
    margin: 0; font-size: 14px; line-height: 1.45; font-weight: 700;
  }
  .rbx-wf__warnung {
    margin: 0; padding: 11px 14px; border-radius: 12px;
    background: #fff6e6; color: #7a4a00;
    font-size: 13px; line-height: 1.45;
  }
  .rbx-wf__warnung[hidden] { display: none; }
  .rbx-wf__klein {
    margin: 0; font-size: 13px; line-height: 1.45; opacity: .7;
  }
  .rbx-wf__zeile { display: flex; gap: 8px; flex-wrap: wrap; }
  .rbx-wf__zeile[hidden] { display: none; }
  .rbx-wf__mini {
    padding: 8px 13px; 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;
  }
  .rbx-wf__mini:hover { background: rgb(var(--color-foreground) / 0.12); }

  /* --- Regler -------------------------------------------------------------- */
  .rbx-wf__regler { display: grid; gap: 14px; }
  .rbx-wf__regler label { display: grid; gap: 6px; font-size: 13px; line-height: 1.2; }
  .rbx-wf__regler-kopf { display: flex; justify-content: space-between; gap: 10px; }
  .rbx-wf__regler-wert { opacity: .6; font-variant-numeric: tabular-nums; }
  .rbx-wf__schieber {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 20px; border-radius: 999px; background: transparent;
    cursor: pointer; margin: 0;
  }
  .rbx-wf__schieber::-webkit-slider-runnable-track {
    height: 20px; border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground) / 0.14);
  }
  /* Firefox malt dem Track einen eigenen Hintergrund. Der Verlauf haengt aber
     am Element selbst — ohne transparent davor bliebe der Schieber grau. */
  .rbx-wf__schieber::-moz-range-track {
    height: 20px; border-radius: 999px; background: transparent;
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground) / 0.14);
  }
  .rbx-wf__schieber::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 24px; height: 24px; margin-top: -2px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .5), 0 1px 4px rgba(0, 0, 0, .3);
  }
  .rbx-wf__schieber::-moz-range-thumb {
    width: 24px; height: 24px; border: 0; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .5), 0 1px 4px rgba(0, 0, 0, .3);
  }
  .rbx-wf__hexfeld {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 13px; line-height: 1.3;
  }
  .rbx-wf__hexfeld input {
    width: 130px; padding: 9px 12px; border-radius: 10px;
    border: 1px solid rgb(var(--color-foreground) / 0.2);
    background: transparent; color: inherit; font: inherit; font-size: 14px;
    letter-spacing: .06em; text-transform: uppercase;
  }

  /* --- Begleittoene -------------------------------------------------------- */
  .rbx-wf__trio { display: grid; gap: 8px; }
  .rbx-wf__trio[hidden] { display: none; }
  .rbx-wf__trio-titel { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.2; }
  .rbx-wf__trio-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .rbx-wf__trio-kachel {
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 84px; padding: 9px; border-radius: 12px;
    color: inherit; text-decoration: none;
    font-size: 11px; line-height: 1.25; font-weight: 600;
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground) / 0.12);
  }
  .rbx-wf__trio-kachel:hover { text-decoration: underline; }

  /* --- Kaufteil ------------------------------------------------------------
     Menge und Finish stehen jetzt im selben Kasten wie die Regler: Wer den Ton
     einstellt, entscheidet im selben Blick ueber Gebinde und Glanzgrad. */
  .rbx-wf__kauf { display: grid; gap: 14px; }
  .rbx-wf__gruppe { display: grid; gap: 7px; }
  .rbx-wf__gruppe-titel { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.2; }
  .rbx-wf__optionen { display: flex; gap: 8px; flex-wrap: wrap; }
  .rbx-wf__option {
    padding: 9px 15px; border: 0; border-radius: 999px;
    background: rgb(var(--color-foreground) / 0.06); color: inherit;
    font: inherit; font-size: 14px; line-height: 1.2; cursor: pointer;
    transition: background .15s ease, color .15s ease;
  }
  .rbx-wf__option:hover { background: rgb(var(--color-foreground) / 0.12); }
  .rbx-wf__option[aria-pressed='true'] {
    background: rgb(var(--color-foreground)); color: rgb(var(--color-background));
  }
  .rbx-wf__option[data-weg='true'] { opacity: .35; text-decoration: line-through; }
  .rbx-wf__preiszeile {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    font-size: 16px; font-weight: 700; line-height: 1.25;
  }
  .rbx-wf__preis-klein { font-size: 12px; font-weight: 400; opacity: .65; }

  /* Gesperrt heisst hier „du hast den Ton noch nicht gewaehlt“, nicht
     „ausverkauft“ — der Text muss lesbar bleiben, das Theme laesst dem
     gesperrten Button sonst weisse Schrift auf hellem Grund. */
  .rbx-wf__kauf .button[disabled],
  .rbx-wf__kauf .button[disabled] .btn-text { color: #313131; }

  .rbx-wf__hinweis {
    margin: 0; padding: 12px 14px; border-radius: 14px;
    background: rgb(var(--color-foreground) / 0.04);
    font-size: 13px; line-height: 1.45;
  }
  .rbx-wf__hinweis a { color: inherit; }

  @media screen and (max-width: 460px) {
    .rbx-wf__ergebnis { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
    .rbx-wf__probe { width: 72px; height: 72px; }
  }

  /* --- Die Schrittzeilen ----------------------------------------------------
     Frueher eine eigene Leiste ueber allem, jetzt stehen die Zeilen dort, wo der
     Schritt auch passiert: im Kasten, ueber und unter dem Ablagefeld. Die
     Reihenfolge macht das Markup, nicht mehr order(). */
  .rbx-wf { grid-auto-flow: row; }
  .rbx-wf__schritt[hidden] { display: none; }
  .rbx-wf__schritt {
    display: grid; grid-template-columns: 30px minmax(0, 1fr);
    gap: 13px; align-items: center;
    padding: 14px 16px; border-radius: 14px;
    background: rgb(var(--color-foreground) / 0.04);
    transition: background .25s ease, opacity .25s ease;
  }
  .rbx-wf__schritt-nr {
    position: relative; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 14px; font-weight: 700; line-height: 1;
    background: rgb(var(--color-foreground) / 0.1);
    transition: background .25s ease, color .25s ease;
  }
  /* Der Punkt ohne Ziffer: „Farbton selbst einstellen“ ist kein Schritt in einer
     Reihenfolge, sondern ein zweiter Weg. Voller Punkt statt Zahl. */
  .rbx-wf__schritt--frei .rbx-wf__schritt-nr {
    background: rgb(var(--color-foreground)); color: transparent;
  }
  .rbx-wf__schritt-text { display: grid; gap: 2px; min-width: 0; }
  .rbx-wf__schritt-text b { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
  .rbx-wf__schritt-text i { font-style: normal; font-size: 13px; line-height: 1.4; opacity: .7; }

  /* Der Schritt, der gerade dran ist: kraeftige Ziffer. */
  .rbx-wf__schritt[data-jetzt='true'] .rbx-wf__schritt-nr {
    background: rgb(var(--color-foreground)); color: rgb(var(--color-background));
  }

  /* Erledigt: Das Haekchen wird gezeichnet, nicht eingeblendet — eine Linie, die
     entsteht, liest sich als Abhaken; ein Zeichen, das aufpoppt, nicht. */
  .rbx-wf__schritt[data-fertig='true'] { opacity: .62; }
  .rbx-wf__schritt[data-fertig='true'] .rbx-wf__schritt-nr {
    background: #2e7d5b; color: transparent;
  }
  .rbx-wf__schritt[data-fertig='true'] .rbx-wf__schritt-nr::after {
    content: ''; position: absolute;
    left: 9px; top: 14px; width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    animation: rbxWfHaken .34s cubic-bezier(.2, .8, .3, 1.2) forwards;
  }
  @keyframes rbxWfHaken {
    0%   { transform: rotate(45deg) scale(0); opacity: 0; }
    60%  { transform: rotate(45deg) scale(1.25); opacity: 1; }
    100% { transform: rotate(45deg) scale(1); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rbx-wf__schritt[data-fertig='true'] .rbx-wf__schritt-nr::after { animation: none; transform: rotate(45deg) scale(1); opacity: 1; }
  }

  /* Der Namensvorschlag: eine Zeile unter dem Hexwert, kein eigener Kasten. */
  .rbx-wf__vorschlag { margin: 0; font-size: 13px; line-height: 1.4; }
  .rbx-wf__vorschlag[hidden] { display: none; }
  .rbx-wf__vorschlag b { font-weight: 700; }