/* every-layout style primitives, eigene Implementierung */

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * + * {
  margin-block-start: var(--space, var(--s1));
}

.stack--small > * + * {
  margin-block-start: var(--s-1);
}

.stack--large > * + * {
  margin-block-start: var(--s2);
}

.stack--xlarge > * + * {
  margin-block-start: var(--s3);
}

.center {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--measure);
  padding-inline: var(--s1);
}

.center--wide {
  max-inline-size: 80ch;
}

.center--narrow {
  max-inline-size: 45ch;
}

/* Bug 96: einheitlicher vertikaler Atemraum für jeden Content-
   Artikel (Newsletter, Settings, Legal, Onboarding). Vorher war
   das padding-block per inline style="padding-block: var(--s2)"
   in jedem Layout-Template hartgepinnt — zu eng, „Woche 18"
   klebte am Header. Jetzt: --s4 (clamp ~2.4rem mobile, ~4rem
   desktop) oben und unten, plus --s4 Footer-Margin (siehe
   main.css) → ca. 4-6rem Luft zwischen Content-Ende und
   Footer-Border auf Desktop, ohne dass Mobile gequetscht wirkt.
   Hero-Pages (login.njk → .cover) bekommen die Klasse nicht,
   weil .cover seine eigene Full-Height-Logik hat. */
.page-section {
  padding-block: var(--s4);
}

.box {
  padding: var(--s1);
  border: var(--border-thin) solid var(--color-dark);
  background-color: var(--color-light);
  color: var(--color-dark);
}

.box--invert {
  background-color: var(--color-dark);
  color: var(--color-light);
  border-color: var(--color-light);
}

.box--ghost {
  background: transparent;
  border-color: var(--color-darkish);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  align-items: center;
  justify-content: flex-start;
}

.cluster--end {
  justify-content: flex-end;
}

.cluster--between {
  justify-content: space-between;
}

.cover {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100svh;
  padding: var(--s1);
}

.cover > * {
  margin-block: var(--s1);
}

.cover > :first-child:not(.cover__centered) {
  margin-block-start: 0;
}

.cover > :last-child:not(.cover__centered) {
  margin-block-end: 0;
}

.cover > .cover__centered {
  margin-block: auto;
}