/* ============================================================
   VCI Design — Layout
   Container, 12/6-Spalten-Grid, Full-Bleed, Sektionsrhythmus.
   Bewusst einstufig gehalten, kein Extended/Wide/Narrow-System.
   ============================================================ */

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

/* 12 Spalten auf Desktop, 6 ab 768px abwaerts. Der Wechsel
   passiert ueber --grid-columns in tokens.css, nicht hier. */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--gutter);
}

/* Full-Bleed fuer immersive Momente wie Hero und Sticky-Stack:
   bricht aus dem Container aus, ohne horizontales Scrollen zu
   erzeugen. */
.full-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Schmale Lesespalte fuer schlichte Textseiten wie Danke und
   Datenschutz. Steht hier und nicht in einer Sektionsdatei, weil
   es ein Layout-Grundbaustein ist und von mehreren Seiten
   gebraucht wird. */
.textseite {
  max-width: 46rem;
  padding-block: var(--space-xxl);
}

.textseite > * + * {
  margin-top: var(--space-l);
}

/* Abstand zwischen Sektionen. Grosse Spacer gehoeren zwischen
   Sektionen, kleine innerhalb eines Containers. */
.section {
  padding-block: var(--space-xxl);
}

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

/* Verhindert, dass eine einzelne zu breite Sektion die ganze
   Seite horizontal scrollen laesst. */
body {
  overflow-x: clip;
}