/* ============================================================
   Utilities · Helper-Klassen, sparsam einsetzen
   ============================================================ */

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Text alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Color helpers */
.text-muted    { color: var(--fg-muted); }
.text-faint    { color: var(--fg-faint); }
.text-accent   { color: var(--c-blue); }
.text-on-dark  { color: var(--fg-on-dark); }

.bg-soft     { background: var(--bg-soft); }
.bg-inverted { background: linear-gradient(135deg, #0B1B3A, #130F2D); color: var(--fg-on-dark); }

/* Spacing helpers */
.mt-0 { margin-top: 0; }   .mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); } .mt-7 { margin-top: var(--space-7); }

.mb-0 { margin-bottom: 0; } .mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

/* Display */
.hidden { display: none !important; }
.flex { display: flex; }
.grid { display: grid; }
.inline-flex { display: inline-flex; }

/* Width helpers */
.max-w-prose { max-width: 60ch; }
.max-w-sm    { max-width: 360px; }
.max-w-md    { max-width: 560px; }
.max-w-lg    { max-width: 840px; }

/* Aspect ratios */
.aspect-square   { aspect-ratio: 1/1; }
.aspect-portrait { aspect-ratio: 4/5; }
.aspect-video    { aspect-ratio: 16/9; }
.aspect-wide     { aspect-ratio: 21/9; }