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

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

.container-narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 48rem) {
  .container, .container-narrow { padding-inline: var(--space-6); }
}

.section {
  padding-block: var(--space-12);
}

@media (min-width: 48rem) {
  .section { padding-block: var(--space-16); }
}

.section-soft {
  background: var(--color-bg-soft);
  border-block: 1px solid var(--color-border);
}

.section-primary {
  background: linear-gradient(180deg, var(--color-primary-soft), var(--color-bg));
}

.section-header {
  margin-block-end: var(--space-8);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.section-header h2 { margin: 0; }

/* Grid Helpers */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-cols-1 { grid-template-columns: 1fr; }

@media (min-width: 36rem) {
  .grid-cols-2-md { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 56rem) {
  .grid-cols-3-lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-2-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Stack Utility */
.stack > * + * { margin-block-start: var(--space-4); }
.stack-lg > * + * { margin-block-start: var(--space-6); }

/* Visually hidden but accessible */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}