/* ==========================================================================
   Spacing – Abstands-Klassen für Margins und Paddings
   ========================================================================== */

/* ── Sektionen ──────────────────────────────────────────────────────────── */

.section {
  padding: var(--spacing-4xl) 0;
}

.section--sm {
  padding: var(--spacing-2xl) 0;
}

.section--lg {
  padding: var(--spacing-4xl) 0;
}

/* ── Container ──────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* ── Margin-Utilities ───────────────────────────────────────────────────── */

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

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

/* ── Padding-Utilities ──────────────────────────────────────────────────── */

.pt-0  { padding-top: 0; }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }

.pb-0  { padding-bottom: 0; }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }

/* ── Responsive Sektionen ───────────────────────────────────────────────── */

@media (max-width: 768px) {
  .section {
    padding: var(--spacing-2xl) 0;
  }

  .section--lg {
    padding: var(--spacing-3xl) 0;
  }
}