/* Container, Raster, Sektionskante. */

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

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

/* Sektionskante.
   Waagerecht: eine Sektion stößt gerade an die nächste, die Trennung
   entsteht allein über Farbwechsel und vertikalen Abstand. */
.sec {
  position: relative;
  padding-block: var(--section-y);
}

/* Spaltenhilfe. Unterhalb von 768px ist alles einspaltig. */
.col-text { grid-column: 1 / -1; }

@media (min-width: 768px)  { .col-text { grid-column: 1 / span 8; } }
@media (min-width: 1024px) { .col-text { grid-column: 1 / span 7; } }