/* ============================================================================
 * bemessung.css — Größe, Anzahl, Krenks Satz (#901, 05.10.2026)
 * Stück: js/ui/bemessung.js (TC.Bemessung) · Library: library-community.html#werkbank-groesse
 * Geladen überall, wo ein Vorhaben entsteht: dashboard, untergrund, spieler
 * (Werkbank und Waage), werkstatt-album und werkstatt-gaestebuch (Foto-Upload,
 * „Neues Projekt…"), Library.
 * Die Größe ist breit (das Beispiel steht in der Option), die Anzahl schmal —
 * nebeneinander auch bei 375 px, darum kein tc-form-row (der bricht um).
 * Der Satz darunter ist Krenks Auskunft, keine Eingabe: abgesetzt wie der
 * Zielsatz, aber mit der Farbe der Werte (--tc-highlight), nicht des Akzents.
 * ========================================================================== */
.wb-bemessung { margin-bottom: var(--tc-space-3); }
.wb-bemessung__reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem;
  gap: var(--tc-space-2);
  align-items: end;
}
.wb-bemessung__reihe > .tc-form-group { margin-bottom: 0; min-width: 0; }
.wb-bemessung__reihe .tc-select { min-width: 0; width: 100%; text-overflow: ellipsis; }
.wb-bemessung__je { margin: var(--tc-space-1) 0 0; }
.wb-bemessung__je:empty { display: none; }
.wb-bemessung__satz {
  display: flex;
  align-items: baseline;
  gap: var(--tc-space-2);
  margin: var(--tc-space-2) 0 0;
  padding: var(--tc-space-2) var(--tc-space-3);
  border-left: 3px solid var(--tc-highlight);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-bg-surface-3);
  color: var(--tc-text-strong);
  font-size: var(--tc-text-sm);
  line-height: var(--tc-leading-snug);
}
.wb-bemessung__satz.is-leer {
  border-left-color: var(--tc-border-default);
  color: var(--tc-text-muted);
  font-style: italic;
}
.wb-bemessung__uhr { flex: none; }
.wb-bemessung__satz.is-leer .wb-bemessung__uhr { opacity: 0.5; }
/* Die Zeilen der Waage: ohne Beschriftung, der Satz leiser. */
.wb-bemessung--kompakt { margin: var(--tc-space-2) 0 0; }
.wb-bemessung--kompakt .wb-bemessung__satz {
  padding: var(--tc-space-1) var(--tc-space-2);
  font-size: var(--tc-text-xs);
}
/* ---- Teile (#1180, Tim 17.10.2026: „1 × Held und 3 × Endless Spell“) ----
   Jede Zeile ein Teil, darunter „+ Noch ein Teil“. Ab zwei Teilen bekommt
   jede Zeile ein ✕ in einer dritten Spalte (auch die erste, die ihre
   Beschriftung behält und darüber wie ein Spaltenkopf wirkt). Die Spalten sind
   in allen Zeilen gleich breit: 1fr, die Anzahl, der Icon-Knopf. */
.wb-bemessung.is-mehrere .wb-bemessung__reihe {
  grid-template-columns: minmax(0, 1fr) 5.5rem auto;
}
.wb-bemessung__reihe + .wb-bemessung__reihe { margin-top: var(--tc-space-2); }
.wb-bemessung__reihe--teil .tc-select { min-width: 0; width: 100%; text-overflow: ellipsis; }
/* Ausgeblendet wird per `hidden`; das trägt `.tc-button[hidden]` (button.css). */
.wb-bemessung__dazu { margin-top: var(--tc-space-2); }
/* ---- Die Malstufe (#1209, aus dem Konzept #1181) ---------------------------
   „Wie gut soll es werden?“: drei gleich breite Spalten (tc-choice--spalten),
   das Wort oben, leise darunter, was es heißt. Ein fieldset ohne Browser-
   Rahmen; das Raster steckt im tc-choice, nicht am fieldset (sonst legt der
   Browser die legend als Zelle daneben, §7a-4). Darunter, wenn es eines gibt,
   das Beispielbild der gewählten Stufe in voller Breite: Die Unterschiede
   zwischen den Stufen sieht man erst, wenn die Figur groß genug ist. */
.wb-bemessung__guete {
  min-width: 0;
  margin: var(--tc-space-3) 0 0;
  padding: 0;
  border: 0;
}
.wb-bemessung__guete > legend {
  display: block;
  padding: 0;
  margin-bottom: var(--tc-space-2);
}
.wb-bemessung__beispiel {
  margin: var(--tc-space-2) 0 0;
  border-radius: var(--tc-radius-md);
  overflow: hidden;
  background: var(--tc-bg-surface-3);
}
.wb-bemessung__beispiel[hidden] { display: none; }
.wb-bemessung__beispiel > img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}