/* =========================================================================
   LAYOUT — Container, Sektionsrhythmus, generische Raster.
   ========================================================================= */

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

/* Schweizer Lese-Spalte: Inhalt LINKS BÜNDIG zum Hero (gleiche linke Kante,
   voller Container), feste Lesebreite, Weißraum konsequent rechts.
   Überschreibt die per-Absatz-Kappung aus base.css. */
.prose > :where(p, ul, ol, blockquote, h2, h3, h4, details) {
  max-width: var(--container-narrow);
  margin-inline: 0;
}

/* Großzügiger, gleichmäßiger Vertikalrhythmus: viel Luft, klare Ordnung */
main > section { padding-top: var(--space-8); padding-bottom: var(--space-8); }

/* Adjacent sections: If two sections follow each other, we collapse the massive padding to form a cohesive flow, acting like block flow */
main > section + section { padding-top: 0; }

/* Hero und der direkt folgende Text gehoeren zusammen: die grosse Sektions-
   Luft zwischen Hero-Unterkante und erstem Textabsatz rausnehmen. */
:is(.content-hero-section, .hero-parallax) + section { padding-top: 0; }

/* Abstand zwischen Sektions-Überschrift und folgenden Blöcken */
main > section > .container > * + * { margin-top: var(--space-5); }
main > section > .container + .container { margin-top: var(--space-5); }

/* Auto-Grid: gleich breite Spalten, früher Umbruch */
.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}