/* Eine Spalte für die ganze Seite.
 *
 * Die Navigationsleiste steht über jedem Bereich und ist damit die Kante, an
 * der sich alles andere ausrichtet: 1200px breit, 20px Rand, unter 640px
 * 12px. Lief ein Bereich mit eigenen Maßen, sprang der Inhalt gegenüber der
 * Leiste darüber ein — sichtbar als Stufe an der linken Kante.
 *
 * Deshalb steht die Zahl genau einmal, hier. Die Werte stehen zusätzlich in
 * apps/shared/tba3-leiste.js, weil das Shadow DOM keine Variable von außen
 * erbt; `apps/shared/container.test.mjs` hält die beiden zusammen.
 *
 * Eingebunden als <link rel="stylesheet" href="/gemeinsam/container.css"> —
 * im Dev-Server von vite-plugin-gemeinsam.js, im Build von build-site.mjs.
 */

:root {
  --breite: 1200px;
  --rand: 20px;
}

@media (max-width: 640px) {
  :root { --rand: 12px; }
}

/* Die Klasse für alles, was in dieser Spalte steht — der Name, den Portal,
   Rückmeldungen und Dokumentation schon tragen. Bereiche mit eigenem Markup
   (Katalog, Schnittstelle) binden stattdessen `var(--breite)` und
   `var(--rand)` in ihre eigenen Regeln ein: dieselbe Zahl, anderer Weg. */
.wrap {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}