@layer utilities {
/* v3/utilities.css — kleine Helfer.
 * Letzter Layer: gewinnt bewusst gegen components und panels. Genau das ist
 * der Zweck von Utilities - eine gezielte Ausnahme am Einsatzort.
 * Sparsam halten: alles, was mehr als zweimal gebraucht wird, gehoert in
 * components.css. */
.u-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.u-row   { display: flex; align-items: center; gap: var(--sp-3); }
.u-row--between { justify-content: space-between; }
.u-wrap  { flex-wrap: wrap; }
.u-grow  { flex: 1 1 auto; min-width: 0; }

.u-mt-0 { margin-top: 0; }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-8 { margin-top: var(--sp-8); }
.u-mb-4 { margin-bottom: var(--sp-4); }

.u-dim    { color: var(--text-2); }
.u-dimmer { color: var(--text-3); }
.u-num    { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.u-hairline { border: 0; border-top: 1px solid var(--line-1); margin: var(--sp-6) 0; }

.u-container { max-width: var(--measure-wide); margin-inline: auto; }
.u-measure   { max-width: var(--measure); margin-inline: auto; }

@media (max-width: 720px) { .u-hide\@sm { display: none; } }
@media (min-width: 721px) { .u-only\@sm { display: none; } }
}