/* ==========================================================================
   layout.css — Seitengerüst, Abschnitts-Rhythmus, Raster, die dunkle Bühne.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grundgerüst — Kopf oben, Inhalt dehnbar, Fuß unten. Auch bei kurzen Seiten.
   -------------------------------------------------------------------------- */

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* --------------------------------------------------------------------------
   Inhaltsbreite
   -------------------------------------------------------------------------- */

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

.wrap-narrow {
  max-width: var(--wrap-narrow);
}

/* --------------------------------------------------------------------------
   Abschnitte — der vertikale Rhythmus der ganzen Seite steckt hier und nur
   hier. Einzelne Seiten setzen keine eigenen Abstände.
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--space-2xl);
}

.section-tight {
  padding-block: var(--space-xl);
}

.section-hero {
  padding-block: var(--space-3xl) var(--space-2xl);
}

.section + .section {
  padding-block-start: 0;
}

/* Zwei Abschnitte auf gleichem Grund brauchen keinen doppelten Abstand,
   zwei mit Grundwechsel dagegen schon. */
.stage + .section,
.section + .stage,
.surface-band + .section,
.section + .surface-band {
  padding-block-start: var(--space-2xl);
}

.section-head {
  max-width: var(--measure);
  margin-block-end: var(--space-lg);
  display: grid;
  gap: var(--space-2xs);
}

/* --------------------------------------------------------------------------
   Die dunkle Bühne.
   Läuft über die volle Fensterbreite, stellt alle Textfarben um und ist der
   einzige Ort, an dem Lime und Mint Text tragen dürfen — auf diesem Grund
   erreicht Lime rund 10:1, auf hellem Grund nur 1,5:1.
   -------------------------------------------------------------------------- */

.stage {
  background: var(--stage);
  color: var(--stage-ink);

  /* Innerhalb der Bühne zeigen die semantischen Namen auf die Bühnenwerte,
     damit Komponenten unverändert funktionieren. */
  --surface: color-mix(in oklab, var(--stage) 88%, white);
  --border: var(--stage-border);
  --ink: var(--stage-ink);
  --ink-soft: var(--stage-ink-soft);
  --link: var(--stage-link);
}

.stage h1,
.stage h2,
.stage h3 {
  color: var(--stage-ink);
}

/* Nur hier erlaubt: Lime als Textfarbe. */
.stage .accent-text {
  color: var(--stage-accent);
}

/* Ein hell abgesetztes Band, wenn ein Abschnitt sich vom Grund lösen soll,
   ohne gleich zur Bühne zu werden. */
.surface-band {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   Raster.

   Die Spaltenzahl ergibt sich aus dem Platz, den das Raster tatsächlich hat —
   nicht aus der Fensterbreite. Möglich macht das `auto-fit` mit einer
   Mindestbreite: Passen zwei Spalten nebeneinander, gibt es zwei, sonst eine.
   Dieselbe Kachelreihe funktioniert dadurch in einer schmalen Spalte genauso
   wie über die volle Breite, ganz ohne Haltepunkte.

   Bewusst KEINE Container Query dafür: Ein Element kann sich nicht selbst
   abfragen — `@container` sucht immer einen ÜBERGEORDNETEN Container. Wer
   `container-type` auf dasselbe Element setzt, das er gestalten will, baut
   eine Bedingung, die nie zutrifft. Genau das ist hier passiert und ist der
   Grund, warum die Spaltenaufteilung eine Zeit lang wirkungslos war.
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-md);
}

/* Bricht selbstständig um, sobald die Spalten unter die Mindestbreite fallen.
   Kein einziger Breakpoint nötig. */
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

/* Für Reihen mit genau vier Elementen — etwa den vierteiligen Ablauf.
   Hier bewusst KEIN auto-fit: dessen Spaltenzahl ergibt sich aus Container-
   breite, Lücke und Mindestbreite, und schon eine Änderung an den Abstands-
   Tokens kippt die Reihe unbemerkt auf 3 + 1. Ein einzelnes Element unter
   drei anderen sieht nach Versehen aus, nicht nach Gestaltung. Die Stufen
   1 → 2 → 4 werden deshalb direkt gesagt. */
.grid-4 {
  grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Text neben Beiwerk.
   Zwei Spalten, sobald zwei mal 26rem nebeneinander passen — sonst
   untereinander. Bei der hier gedeckelten Inhaltsbreite können daraus nie
   drei Spalten werden: dafür bräuchte es über 81rem Platz. */
.split {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
}

@media (min-width: 64rem) {
  .split {
    gap: var(--space-xl);
  }
}

.stack {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}

/* .stack-lg war urspruenglich als reiner Abstands-Zusatz zu .stack gedacht und
   setzte nur gap. Benutzt wurde die Klasse aber an 32 von 39 Stellen ALLEIN,
   auf .wrap-Behaeltern, auf <form> und auf <fieldset> — alles Block-Elemente.
   Ein gap ohne Raster oder Flex tut nichts: Der berechnete Wert stand da, der
   Browser kannte ihn, und trotzdem lagen die Kinder auf Abstand null. Auf
   /check klebte dadurch die Beschriftung eines Feldes am Feld darueber.

   Statt 32 Aufrufstellen nachzuziehen und dabei eine zu uebersehen, traegt die
   Klasse ihr Raster jetzt selbst. Zusammen mit .stack benutzt bleibt sie
   gueltig: beide setzen display, und das spaetere gap gewinnt. */
.stack-lg {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.flow > * + * {
  margin-block-start: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Kleine Hilfen
   -------------------------------------------------------------------------- */

.center {
  text-align: center;
}

.center p,
.center .lead {
  margin-inline: auto;
}

.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}