/* Die Hoerprobe: Starttaste, ein Regler, ein Wert.
 *
 * Geladen wird dieses Blatt nur auf den Seiten, die einen Behaelter tragen —
 * den fuenf Pruefpunkten, der Startseite und /spielen/. Es steht deshalb
 * nicht in basis.css: die 33 Bauschritt-Seiten haben keinen Ton und sollen
 * dafuer nichts laden.
 *
 * Drei Dinge, die hier durchgesetzt werden:
 *
 *   1. **Leer bleibt unsichtbar.** Ohne JavaScript fuellt niemand den
 *      Behaelter, und ein leerer Kasten mitten auf der Seite saehe aus wie
 *      ein Fehler. Die Regel steht schon in pruefpunkt.css und segment.css;
 *      hier steht sie fuer jede Seite, die dieses Blatt laedt.
 *   2. **Die Taste ist eine Taste.** Rot wie die Weiter-Taste, gross genug
 *      fuer einen Finger (44 px), und sie steht *vor* dem ersten Ton da.
 *   3. **Der Schieber rastet.** Er faehrt ueber die Stellungen, die der
 *      Encoder am Geraet einnimmt — eine Stufe, eine Raste. Was dazwischen
 *      laege, gaebe es am Geraet nicht.
 */

.synth {
  margin: 0 0 1.5rem;
  padding: 0.875rem 1rem 1rem;
  border: 2px solid var(--linie);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.synth:empty {
  display: none;
  padding: 0;
  border: 0;
}

/* Spielt es gerade, ist der Rahmen rot — auf einer Seite mit vier
 * Behaeltern sieht man so, welcher der vier zu hoeren ist. */
.synth[data-zustand="spielt"] {
  border-color: var(--rot);
}

.synth-taste {
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  border: 0;
  border-radius: 6px;
  background: var(--rot);
  color: var(--papier);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.synth-taste:hover {
  background: #a81710;
}

.synth-taste[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* --- Der Regler ----------------------------------------------------------- */

.synth-regler {
  flex: 1 1 14rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.synth-name {
  font-weight: 700;
}

.synth-schieber {
  flex: 1 1 auto;
  min-width: 6rem;
  min-height: 44px;
  accent-color: var(--rot);
}

/* Die Zahl daneben springt sonst bei jeder Stellung um ein paar Pixel und
 * schiebt den Schieber mit. Ziffern gleicher Breite halten sie still. */
.synth-wert {
  min-width: 3.5rem;
  text-align: right;
  color: var(--grau);
  font-variant-numeric: tabular-nums;
}

/* --- Wenn kein Ton geht --------------------------------------------------- */

.synth-hinweis:empty {
  display: none;
}

.synth-hinweis,
.synth-ohneton {
  flex: 1 1 100%;
  margin: 0;
  color: var(--grau);
}

/* --- /spielen/: vier Felder, je Zeichnung und Behaelter -------------------- */

.synthfeld {
  min-width: 0;
}

.synthfeld .zeichnung {
  margin: 0 0 0.75rem;
}