/* Gap-Utilities für Flex-Container */
.g-4 { gap: 0.25rem; }
.g-8 { gap: 0.5rem; }
.g-12 { gap: 0.75rem; }
.g-16 { gap: 1rem; }
.g-24 { gap: 1.5rem; }
.g-32 { gap: 2.5rem; }
/* Verhindert Umbruch bei Row */
/* Verhindert Umbruch bei Row und erlaubt Gap */
.row-nowrap {
  flex-wrap: nowrap;
}
.row.row-nowrap {
  gap: 1rem;
}
.row.row-nowrap.g-4 { gap: 0.25rem; }
.row.row-nowrap.g-8 { gap: 0.5rem; }
.row.row-nowrap.g-12 { gap: 0.75rem; }
.row.row-nowrap.g-16 { gap: 1rem; }
.row.row-nowrap.g-24 { gap: 1.5rem; }
.row.row-nowrap.g-32 { gap: 2rem; }
@media (max-width: 780px) {
  .row-nowrap {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
}

/* Gleichbreite Spalten */

.col {
  flex: 1 1 0;
}

/* Content-basierte Spalten */

.col-auto {
  flex: 0 0 auto;
}
/* Vertikale Zentrierung */
.items-center {
  align-items: center;
}

.justify-content-center {
  justify-content: center;
}

/* Zentrierung und Abstand */
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Responsive: Spalten untereinander ab 780px */

/* Responsive: Spalten untereinander ab 780px */
@media (max-width: 780px) {
  .row {
    flex-direction: column;
  }
  /* Zentrierung bei Responsive mit .responsive-center */
  .row.responsive-center {
    align-items: center;
    justify-content: center;
  }
  .row.responsive-center > .col,
  .row.responsive-center > .col-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: center;
    text-align: center;
  }
}