/* Container & Section-Raster ---------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section {
  padding-block: var(--space-6);
}
.section--tight { padding-block: var(--space-5); }
.section--dark {
  background: var(--ink-900);
  color: var(--ink-text);
}
.section--panel {
  background: var(--ink-800);
  color: var(--ink-text);
}

.section-head {
  margin-bottom: var(--space-4);
  max-width: 42rem;
}
.section-head h2 { margin-top: 0.35em; }

.grid {
  display: grid;
  gap: var(--space-3);
}
/* Grid-Items duerfen unter ihre Inhaltsbreite schrumpfen, sonst kann eine
   einzelne lange, unbrechbare Zeile (z. B. eine Eyebrow in Grossbuchstaben)
   die 1fr-Spalten ungleich verzerren und die Grid-Breite ueberlaufen lassen. */
.grid > * { min-width: 0; }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .section { padding-block: var(--space-5); }
}