/* layout.css - Container, Grid-Primitive, Sektionsrhythmus (Mobile First) */

@layer layout {
  .container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .section { padding-block: var(--space-20); }
  .section + .section { border-block-start: var(--hairline); }
  .section--flush { padding-block: 0; }

  .section-head {
    display: grid;
    gap: var(--space-4);
    margin-block-end: var(--space-10);
  }
  .section-head > p { color: var(--text-muted); font-size: var(--text-lg); }

  /* Kleines Versal-Label, rationiert einsetzen (max. ceil(Sektionen/3) pro Seite) */
  .eyebrow {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
  }

  /* Asymmetrischer Split: Inhalt dominiert, Kontrolle rechts */
  .split {
    display: grid;
    gap: var(--space-10);
    align-items: center;
  }
  @media (min-width: 64rem) {
    .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .split--reverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .split--reverse > .split__main { order: 2; }
  }

  /* Sticky-Stack: links stehende Aussage, rechts laufende Punkte */
  .sticky-stack {
    display: grid;
    gap: var(--space-10);
  }
  @media (min-width: 64rem) {
    .sticky-stack { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .sticky-stack__aside { position: sticky; inset-block-start: calc(72px + var(--space-8)); align-self: start; }
  }

  /* Einfache Grid-Primitive */
  .grid { display: grid; gap: var(--space-6); }
  @media (min-width: 48rem) {
    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}