.hidden { 
  display: none !important; 
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: 0 !important;
}

/* ============================================
   TEXT-AUSRICHTUNG
   ============================================ */
.text-center { 
  text-align: center !important; 
}
.text-start { 
  text-align: start !important; 
}
.text-end { 
  text-align: end !important; 
}

/* ============================================
   TEXT-FARBEN
   ============================================ */
.text-primary { 
  color: var(--color-primary) !important; 
}
.text-secondary { 
  color: var(--color-secondary) !important; 
}
.text-white { 
  color: var(--color-white) !important; 
}
.text-black { 
  color: var(--color-black) !important; 
}
.text-accent { 
  color: var(--color-accent) !important; 
}
.text-light { 
  color: var(--color-light) !important; 
}
.text-default { 
  color: var(--color-text) !important; 
}

/* ============================================
   MARGIN
   ============================================ */
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }
.mt-5 { margin-top: var(--spacing-xxl); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }
.mb-5 { margin-bottom: var(--spacing-xxl); }

.mx-auto { margin-left: auto; margin-right: auto; }


/* ============================================
   BUFFER - Abstände
   ============================================ */

.spacer {
  height: var(--spacing-xxl); /* 6rem */
}

.spacer-sm {
  height: var(--spacing-lg); /* 2rem */
}

.spacer-md {
  height: var(--spacing-xl); /* 4rem */
}

.spacer-lg {
  height: var(--spacing-xxl); /* 6rem */
}