/* Utilities (CP6/X2) — ersetzen wiederkehrende Inline-`style="…"`-Attribute, damit die
 * Style-CSP ohne 'unsafe-inline' auskommt. Nur strukturelle, wiederverwendbare Muster.
 * Bespoke Einzelfälle gehören in die jeweilige p-<seite>.css. Dynamische Styles (Toggle,
 * berechnete Werte) bleiben als JS `element.style.…` (CSSOM ist CSP-unkritisch).
 * Namespace `u-` vermeidet Kollisionen mit bestehenden Komponentenklassen. */

/* Display / Flex */
.u-flex { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-flex-col { flex-direction: column; }
.u-wrap { flex-wrap: wrap; }
.u-items-center { align-items: center; }
.u-items-start { align-items: flex-start; }
.u-items-end { align-items: flex-end; }
.u-justify-center { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-end { justify-content: flex-end; }
.u-flex-1 { flex: 1; }
.u-flex-wrap-gap { display: flex; flex-wrap: wrap; }

/* Gaps */
.u-gap-xs { gap: 0.4rem; }
.u-gap-sm { gap: 0.5rem; }
.u-gap { gap: 0.75rem; }
.u-gap-lg { gap: 1rem; }

/* Häufige zusammengesetzte Zeilen */
.u-row { display: flex; align-items: center; gap: 0.5rem; }
.u-row-sm { display: flex; align-items: center; gap: 0.4rem; }
.u-row-between { display: flex; justify-content: space-between; align-items: center; }
.u-actions-end { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1rem; }

/* Interaktion */
.u-clickable { cursor: pointer; }

/* Breite */
.u-w-full { width: 100%; }
.u-w-auto { width: auto; }

/* Textausrichtung / -farbe */
.u-text-left { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-text-muted { color: var(--color-text-muted); }
.u-text-light { color: var(--color-text-light); }
.u-font-semibold { font-weight: 600; }
.u-text-sm { font-size: 0.875rem; }

/* Abstände (bewusst kleine Skala, deckt die häufigen Inline-Werte ab) */
.u-mt-xs { margin-top: 0.25rem; }
.u-mt-sm { margin-top: 0.5rem; }
.u-mt { margin-top: 0.75rem; }
.u-mt-lg { margin-top: 1rem; }
.u-mb-xs { margin-bottom: 0.25rem; }
.u-mb-sm { margin-bottom: 0.5rem; }
.u-mb { margin-bottom: 0.75rem; }
.u-mb-lg { margin-bottom: 1rem; }
.u-ml-xs { margin-left: 0.25rem; }
.u-ml-sm { margin-left: 0.5rem; }
.u-pt { padding-top: 0.75rem; }
.u-p-sm { padding: 0.5rem; }
.u-p { padding: 0.75rem; }
.u-p-lg { padding: 1rem; }
.u-p-section { padding: 2rem 1rem; }

/* Hinweis-/Info-Box (primary-light mit linker Akzentkante) — mehrfach genutzt */
.u-info-box {
  background: var(--color-primary-light);
  border-left: 3px solid var(--color-primary);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}

/* Mobile (CP6.2): Workflow-Zeilen auf schmalen Screens stapeln, Touch-Ziele ~44px.
 * `u-stack-sm` an Aktions-/Formularzeilen setzen, die mobil untereinander sollen. */
@media (max-width: 640px) {
  .u-stack-sm { flex-direction: column; align-items: stretch; }
  .u-stack-sm > * { width: 100%; }
  .u-touch, .u-stack-sm button, .u-stack-sm .btn { min-height: 44px; }
  .u-hide-mobile { display: none !important; }
}
@media (min-width: 641px) {
  .u-only-mobile { display: none !important; }
}