/* ============================================================
   layout.css — CONTAINER · GRID-HELPER · SECTION-PADDING
   ============================================================ */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }

main { display: block; min-height: 60vh; }

.section { padding: var(--section-py) 0; }
.section--alt  { background: var(--color-bg-alt); }
.section--dark { background: var(--color-bg-dark); color: var(--color-text-invert); }
.section--dark p,
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--color-text-invert); }
.section--flush-top { padding-top: 0; }

/* Section headline pattern: H2 mit Akzent-Linie via ::after */
.section-header {
  text-align: center;
  margin-bottom: var(--space-5);
}
.section-header h2 {
  text-transform: lowercase;
  letter-spacing: 0.02em;
  margin-bottom: 0;
}
.section-header h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--color-accent-warm);
  margin: 18px auto 0;
  border-radius: 2px;
}
/* Legacy <hr> innerhalb von section-header ausblenden — kann sukzessive raus */
.section-header hr { display: none; }

/* Generic grid helpers */
.grid { display: grid; gap: var(--space-3); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

@media (min-width: 1080px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* 2/3 + 1/3 Block */
.split-grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 1080px) {
  .split-grid { grid-template-columns: 2fr 1fr; }
}