/* =========================
   SPACING UTILITIES
========================= */
.spacer {
  width: 100%;
  flex-shrink: 0;
}

.spacer-xs { height: var(--space-xs); }
.spacer-sm { height: var(--space-sm); }
.spacer-md { height: var(--space-md); }
.spacer-lg { height: var(--space-lg); }


/* =========================
   GRID SYSTEM
========================= */
.grid,
.grid2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

/* Varianten */
.grid {
  margin-top: var(--space-xl);
}

.grid2 {
  margin-top: var(--space-md);
}

.hero {
    display: flex;
    gap: 20px;
    align-items: flex-start;

    width: 100%;
    max-width: 1200px;

    margin-top: var(--space-2xl);
}

.vcenter {
    display: flex;
    align-items: center;
    height: 100%;
}