/* KASKADE 1.4: 12/8/4-Spalten-Raster. Erlaubte Layouts: 12 · 8+4 · 7+5 · 6+6 · 4+4+4 · 3+3+3+3 · 5+7 / 7+5.
   Mobil (4 Spalten) stapelt alles; Tablet (8) nutzt die .t-*-Klassen. */

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.section { padding-block: var(--section-pad); }
.section-head { margin-bottom: var(--head-gap); }

.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gutter); }
.grid > * { grid-column: 1 / -1; min-width: 0; }

@media (min-width: 768px) {
  .t-4 { grid-column: span 4 !important; }
  .t-8 { grid-column: span 8 !important; }
}
@media (min-width: 1024px) {
  .c-3  { grid-column: span 3 !important; }
  .c-4  { grid-column: span 4 !important; }
  .c-5  { grid-column: span 5 !important; }
  .c-6  { grid-column: span 6 !important; }
  .c-7  { grid-column: span 7 !important; }
  .c-8  { grid-column: span 8 !important; }
  .c-12 { grid-column: 1 / -1 !important; }
}

/* Raster-Overlay (?grid, nur Preview) */
.grid-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.grid-overlay .container { height: 100%; }
.grid-overlay .grid { height: 100%; }
.grid-overlay .grid > span { grid-column: auto; background: rgba(228, 71, 47, .08); outline: 1px solid rgba(228, 71, 47, .25); }