/* ============================================================
   LAYOUT — Container, Grid, Sektionen
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Überstehende Elemente (z. B. CardSwap-Anschnitt) dürfen keinen
   horizontalen Scroll erzeugen. `clip` beschneidet nur horizontal,
   erzeugt keinen Scroll-Container und lässt vertikal alles sichtbar. */
main {
  overflow-x: clip;
}

/* Vertikaler Rhythmus zwischen Sektionen */
.section {
  padding-block: var(--space-3xl);
}

/* Flexibles Auto-Grid — Karten füllen die Breite und brechen um */
.grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

/* Utility-Stack für vertikale Abstände */
.stack > * + * { margin-top: var(--space-md); }