/* css/utilities.css */

/* Beispiel: Hilfsklassen für Abstände */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
/* ... und so weiter für mb (margin-bottom), ml, mr, mx, my, pt, pb, pl, pr, px, py */

/* Beispiel: Hilfsklassen für Farben */

/* ... und weitere, die du brauchst ... */


h2 {
  position: relative;
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 24px; /* Überschriftgröße */
  margin: 40px 0; /* Abstand oben/unten */
}

h2::before {
  content: "";
  display: inline-block;
  width: 40px;      /* Breite vom linken Block */
  height: 20px;     /* Höhe vom linken Block */
  background-color: #7a5af8a1;
  clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%);
  margin-right: 10px; /* Abstand zwischen Block und Text */
}

h2::after {
  content: "";
  flex: 1;           /* Linie füllt den Rest */
  height: 4px;      /* Höhe der Linie */
  background-color: #7a5af8a1;

  margin-left: 10px; /* Abstand zwischen Text und Linie */

}

h3 {
  font-size: 18px; /* 25% kleiner als h2 (24px * 0.75) */
  margin: 30px 0; /* Abstand oben/unten */
}