/* 07_abschnitt_spalten.css — Multi-Spalten-Layout fuer Mx_yZ_[A-D].
   NEU in v8 (feature/spalten Stufe 1b, 2026-05-20).

   Wrapper: <div class="abschnitt-spalten" data-cols="N"> wird vom Generator
   (content_renderer.php :: renderAbschnittsGruppen) gesetzt, wenn eine
   Basis-Section mehrere Spalten hat (no-Suffix == _A, plus _B/_C/_D).

   Spalten-Markup innen: jede Spalte ist ein normales <div class="abschnitt">.
   Wir ueberschreiben dort margin/max-width, damit Grid-Layout sauber sitzt. */

.abschnitt-spalten {
  display: grid;
  gap: 1.5rem;
  margin: 2rem auto;
  max-width: 1000px;
  padding: 0 1rem;
  /* Backwards-kompatibel zum Tablett-Innenraum (tablett.padding: 2rem) */
  box-sizing: border-box;
}

.abschnitt-spalten[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.abschnitt-spalten[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.abschnitt-spalten[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

/* Innere Abschnitte: kein eigener auto-margin, voller Spalten-Breite,
   keine max-width-Begrenzung mehr (die kommt jetzt vom Grid-Track). */
.abschnitt-spalten > .abschnitt {
  margin: 0;
  max-width: none;
  width: 100%;
}

/* Mobile / schmaler Viewport: alle Spalten untereinander.
   Bewusste Entscheidung 2026-05-20: bei jeder Spaltenanzahl 1-spaltig. */
@media (max-width: 768px) {
  .abschnitt-spalten,
  .abschnitt-spalten[data-cols="2"],
  .abschnitt-spalten[data-cols="3"],
  .abschnitt-spalten[data-cols="4"] {
    grid-template-columns: 1fr;
  }
}