/**
 * Layout — Container, Sections, Grid, Content-Bereiche
 */

.nwa-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
@media (max-width: 600px) { .nwa-container { padding: 0 var(--space-lg); } }

/* Sections */
.section      { padding: var(--space-4xl) 0; }
.section--alt  { background-color: var(--nwa-surface); }
.section--dark { background-color: var(--nwa-blue-900); }

.section-label--light { color: var(--nwa-cyan-400); background: rgba(34,211,238,0.12); }
.section-title--light { color: #fff; }
.section-sub--light   { color: rgba(255,255,255,0.65); }

.section-label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nwa-cyan-600);
  background: var(--nwa-cyan-100);
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-md);
}
.section-title { font-size: var(--fs-4xl); margin-bottom: var(--space-md); }
.section-sub   { font-size: var(--fs-lg); color: var(--nwa-text-500); max-width: 560px; }

/* Grid */
.nwa-grid          { display: grid; gap: var(--space-lg); }
.nwa-grid--2       { grid-template-columns: repeat(2, 1fr); }
.nwa-grid--3       { grid-template-columns: repeat(3, 1fr); }
.nwa-grid--4       { grid-template-columns: repeat(4, 1fr); }
.nwa-grid--center  { align-items: center; }
.nwa-grid--wide-gap { gap: var(--space-3xl); }

@media (max-width: 1024px) { .nwa-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .nwa-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .nwa-grid--2, .nwa-grid--3, .nwa-grid--4 { grid-template-columns: 1fr; } }
@media (max-width: 768px)  { .section { padding: var(--space-2xl) 0; } .section-title { font-size: var(--fs-3xl); } }

/* Content-Bereich mit optionalen Sidebars */
.nwa-content-area {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  padding-block: var(--space-3xl);
}
/* Grid-Items schrumpfen ohne dies nicht unter ihren Inhalt (z.B. breite
   Tabellen) — die Content-Spalte sprengt sonst die Seite nach rechts. */
.nwa-content-area > * { min-width: 0; }

@media (max-width: 640px) { .nwa-content-area { padding-block: var(--space-2xl); } }