/* ═══════════════════════════════════════════════════════════════════════════
   Layout Primitives v2
   Asymmetric grids, magazines layouts, bento helpers.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Container ──────────────────────────────────────────────────────── */

.l-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-edge);
}

/* `.l-container--narrow` wirkt nur mit `.l-container` zusammen und erbt dessen
   `margin-inline: auto` — der Kasten wird damit ZENTRIERT. Das ist fuer die
   404-Seite richtig so (dort steht der Inhalt bewusst mittig).

   Auf den Rechtstexten (Impressum, Datenschutz) war es dagegen sichtbar: der
   Inhalt stand bei x = 153 mit 153px Einfassung links UND rechts, waehrend
   Kopf, Logo, Navigation und der Rest der Seite auf der Containerkante bei
   x = 57 stehen (gemessen am 28.09.2026). Dieselbe Einengung, die bei den
   Subpage-Koepfen behoben wurde.

   Die Klasse bleibt deshalb unveraendert — die Rechtstexte bekommen ihre Kante
   in page-header.css, wo auch die uebrigen Kantenregeln stehen. */
.l-container--narrow {
  max-width: var(--container-narrow);
}

.l-container--wide {
  max-width: var(--container-wide);
}

.l-container--full {
  max-width: none;
  padding-inline: 0;
}

/* ── Section ────────────────────────────────────────────────────────── */

.l-section {
  padding-block: var(--section-spacing-fluid);
}

.l-section--sm {
  padding-block: var(--section-spacing-sm);
}

.l-section--flush {
  padding-block: 0;
}

/* ── Main ───────────────────────────────────────────────────────────── */

.l-main {
  flex: 1;
}

/* ── Basic Grids ────────────────────────────────────────────────────── */

.l-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
}

.l-grid--2 { grid-template-columns: repeat(2, 1fr); }
.l-grid--3 { grid-template-columns: repeat(3, 1fr); }
.l-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Asymmetric Grids ───────────────────────────────────────────────── */

.l-grid--golden {
  grid-template-columns: 5fr 3fr;
}

.l-grid--golden-reverse {
  grid-template-columns: 3fr 5fr;
}

.l-grid--60-40 {
  grid-template-columns: 3fr 2fr;
}

.l-grid--40-60 {
  grid-template-columns: 2fr 3fr;
}

/* ── Bento Grid ─────────────────────────────────────────────────────── */

.l-grid--bento {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
}

.l-grid--bento .l-grid__span-2 {
  grid-column: span 2;
}

.l-grid--bento .l-grid__span-2-row {
  grid-column: span 2;
  grid-row: span 2;
}

/* ── Flex Utilities ─────────────────────────────────────────────────── */

.l-flex {
  display: flex;
  gap: var(--component-gap);
}

.l-flex--center {
  align-items: center;
  justify-content: center;
}

.l-flex--between {
  align-items: center;
  justify-content: space-between;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .l-grid--2,
  .l-grid--3,
  .l-grid--4,
  .l-grid--golden,
  .l-grid--golden-reverse,
  .l-grid--60-40,
  .l-grid--40-60,
  .l-grid--bento {
    grid-template-columns: 1fr;
  }

  .l-grid--bento .l-grid__span-2,
  .l-grid--bento .l-grid__span-2-row {
    grid-column: span 1;
    grid-row: span 1;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .l-grid--3,
  .l-grid--4,
  .l-grid--bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Asymmetrische Raster: die schmale Spalte wird bei mittlerer Breite zu eng.
   Konkret bei --60-40: align-items:stretch zieht das Kartenelement auf die
   Zeilenhoehe, aspect-ratio leitet daraus eine Breite ab, die ueber den Track
   hinausgeht (bei 1024px 506px statt 365px). Die Grenze liegt bei 1280px, weil
   erst dort der Container breit genug fuer die schmale Spalte ist. */
@media (min-width: 769px) and (max-width: 1279px) {
  .l-grid--60-40 {
    grid-template-columns: 1fr;
  }
}