/* ============================================================
   BAN YARO — Utility-Klassen für häufige Inline-Patterns
   Ergänzt design-system.css (Single-Property-Utilities sind dort)
   ============================================================ */

/* ------------------------------------------------------------
   Text + Farb-Kombinationen (häufigste Inline-Patterns)
   ------------------------------------------------------------ */
.text-xs-muted     { font-size: var(--text-xs); color: var(--c-text-muted); }
.text-xs-secondary { font-size: var(--text-xs); color: var(--c-text-secondary); }
.text-sm-muted     { font-size: var(--text-sm); color: var(--c-text-muted); }
.text-sm-secondary { font-size: var(--text-sm); color: var(--c-text-secondary); }

/* Caption = Mini-Label/Hinweis unter einem Wert */
.caption {
  font-size: var(--text-xs);
  color:     var(--c-text-secondary);
  margin-top: 2px;
}

/* ------------------------------------------------------------
   Flex-Layouts (kombiniert)
   ------------------------------------------------------------ */
.flex-gap-2     { display: flex; gap: var(--space-2); }
.flex-gap-3     { display: flex; gap: var(--space-3); }
.flex-col-gap-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.flex-col-gap-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.flex-col-gap-4 { display: flex; flex-direction: column; gap: var(--space-4); }

.flex-center        { display: flex; align-items: center; }
.flex-center-gap-1  { display: flex; align-items: center; gap: var(--space-1); }
.flex-center-gap-2  { display: flex; align-items: center; gap: var(--space-2); }
.flex-center-gap-3  { display: flex; align-items: center; gap: var(--space-3); }

.flex-between       { display: flex; align-items: center; justify-content: space-between; }
.flex-between-gap-2 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }

/* min-width:0 + flex:1 — verhindert Overflow in Flex-Children */
.flex-1-min { flex: 1; min-width: 0; }

/* ------------------------------------------------------------
   Spacing-Lücken in design-system.css füllen
   ------------------------------------------------------------ */
.mb-1 { margin-bottom: var(--space-1); }
.mb-3 { margin-bottom: var(--space-3); }
.mt-1 { margin-top: var(--space-1); }
.mt-3 { margin-top: var(--space-3); }

/* ------------------------------------------------------------
   Icon-Größen (statt width:NNpx;height:NNpx inline)
   ------------------------------------------------------------ */
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 18px; height: 18px; }
.icon-lg { width: 22px; height: 22px; }

/* ------------------------------------------------------------
   Form-Helper
   ------------------------------------------------------------ */
.label-block {
  display:       block;
  font-size:     var(--text-sm);
  font-weight:   600;
  margin-bottom: var(--space-1);
}