/* BUC-36 — Raster, Abstände, Breakpoints. 4px-Basis. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Breakpoints (Referenz — in Media-Queries verwenden): 360 / 768 / 1024 / 1440 */
  --bp-xs: 360px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1440px;

  /* Maximale Inhaltsbreite + Außenabstand (Gutter) je Stufe */
  --container-max: 1200px;
  --gutter: 20px;              /* Mobile ≥360 */

  /* Vertikaler Sektionsrhythmus */
  --section-gap: 56px;        /* Mobile */
}
@media (min-width: 768px)  { :root { --gutter: 40px;  --section-gap: 96px; } }
@media (min-width: 1024px) { :root { --gutter: 64px; } }
@media (min-width: 1440px) { :root { --gutter: 96px;  --section-gap: 128px; } }

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