/* =====================================================
   UTILITIES.CSS
   -----------------------------------------------------
   Kleine Helferklassen für schnelle Anpassungen:
   - Abstände
   - Textausrichtung
   - Sichtbarkeit
   -----------------------------------------------------
   Utilities haben nur EINE Aufgabe.
   Sie enthalten keine komplexe Logik.
===================================================== */


/* =====================================================
   1. SPACING UTILITIES
===================================================== */

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.gap1  { gap: 1rem; }
.gap2  { gap: 2rem; }
.gap3  { gap: 3rem; }


/* =====================================================
   2. TEXT UTILITIES
===================================================== */

.text-center { text-align: center; }
.text-muted { color: var(--color-muted); }


/* =====================================================
   3. DISPLAY UTILITIES
===================================================== */

.hidden { display: none; }
.flex { display: flex; }
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* =====================================================
   4. LAYOUT
===================================================== */

/* Elemente auf Bildschirm zentrieren */
.screen-center {
  display: flex;
  justify-content: center;
}

/* Elemente nebeneinander */
.row {
  display: flex;
  align-items: baseline; /* wichtig für h1 + Text */
}
.row > * {
/* oder: .row > :is(h1,h2,h3,h4,h5,h6,p) {*/
  margin: 0; /* entfernt z.B. h1 margin */
}

.flex-break {
  flex-basis: 100%;
  height: 0;
}