/* =============================================================
   layout.css — Container, Grid, Spacing-Utilities, Sektionen
   ============================================================= */

/* ---- Seitengerüst ---- */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 0 auto; }

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--text { max-width: var(--container-text); }

/* ---- Sektionen ---- */
.section {
  padding-block: var(--section-y);
}
.section--tight { padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.section--alt { background-color: var(--color-surface-alt); }
.section--tint { background-color: var(--color-primary-tint); }
.section--facts { background-color: var(--color-secondary-tint); }
.section--dark {
  background-color: var(--color-primary-dark);
  color: var(--color-text-on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3 {
  color: var(--color-text-on-dark);
}

/* ---- Sektions-Kopf ---- */
.section-head {
  max-width: 720px;
  margin-bottom: var(--space-48);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head p {
  margin-top: var(--space-16);
}
.section-head--center p { margin-inline: auto; }

/* ---- Grid-Utilities ---- */
.grid { display: grid; gap: var(--space-24); }

.grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }

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

/* ---- Inhalt + Sidebar (Angebots-Detail) ---- */
.layout-sidebar {
  display: grid;
  gap: var(--space-48);
  grid-template-columns: 1fr;
}
@media (min-width: 992px) {
  .layout-sidebar {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: var(--space-64);
    align-items: start;
  }
}

/* ---- Flow / vertikaler Rhythmus ---- */
.flow > * + * { margin-top: var(--space-16); }
.flow--lg > * + * { margin-top: var(--space-24); }

/* ---- Spacing-Helfer ---- */
.mt-0 { margin-top: 0; }
.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }
.mt-48 { margin-top: var(--space-48); }
.mb-0 { margin-bottom: 0; }
.mb-24 { margin-bottom: var(--space-24); }
.mb-32 { margin-bottom: var(--space-32); }

/* ---- Cluster (horizontale Gruppe mit Umbruch) ---- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  align-items: center;
}
.cluster--center { justify-content: center; }

/* ---- Prose (reine Lesebereiche, Recht, Artikel) ---- */
.prose { max-width: var(--container-text); }
.prose > * + * { margin-top: var(--space-24); }
.prose h2 { margin-top: var(--space-48); }
.prose h3 { margin-top: var(--space-32); }
.prose ul, .prose ol { padding-inline-start: var(--space-24); }
.prose li + li { margin-top: var(--space-8); }
.prose a { color: var(--color-link); }