/* =========================================================
   TRVECOLOR · layout.css
   Seitengerüst und Layout-Bausteine. Abstände nur über die vier
   Stufen aus tokens.css: --gap-section · --gap-group · --gap-item · --gap-tight.
   Kopf, Tab-Bar und Fuß stehen in components.css (Chrome).
   Bausteine reagieren auf die Breite ihrer Ansicht (Container Queries).
   ========================================================= */

@layer layout {
  /* ---------- Gerüst ---------- */
  .page { max-inline-size: var(--page-max); margin-inline: auto; }

  /* Ansicht: Abschnitte mit Abschnitts-Abstand */
  .view {
    container: view / inline-size;
    display: grid;
    gap: var(--gap-section);
    padding-block: var(--gap-group) 0;
  }
  .view > *, .stack > *, .group > * { min-inline-size: 0; }
  #views:focus { outline: none; }

  /* Orientierung (Tabs, Brotkrumen) gehört zum Kopf darunter: nur Gruppen-Abstand */
  .view > :is(.tabs, .crumbs) { margin-block-end: calc(var(--gap-group) - var(--gap-section)); }

  /* ---------- Bausteine ---------- */
  /* Abschnitt: Überschrift ↔ Inhalt = Gruppen-Abstand */
  .stack { display: grid; gap: var(--gap-group); align-content: start; }
  /* Gruppe: Elemente einer Einheit = Element-Abstand */
  .group { display: grid; gap: var(--gap-item); align-content: start; justify-items: start; }
  .group > :is(.lede, .prose, .swatches, .stats, .rows, .form) { justify-self: stretch; }

  /* Kopf: Kicker ↔ Headline eng, Headline ↔ Lede etwas mehr */
  .page-head { display: grid; gap: var(--gap-tight); justify-items: start; }
  .page-head > * { justify-self: stretch; }
  .page-head > .lede { margin-block-start: var(--gap-item); }

  /* Reihe: Kinder nebeneinander, brechen um */
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-tight) var(--gap-item); }
  .cluster-center { justify-content: center; }
  .cluster-between { justify-content: space-between; align-items: end; }

  /* Zweispalter: Bild links, Text rechts; schmal untereinander */
  /* Ring und Text oben bündig: Ringoberkante = Oberkante Kicker */
  .split { display: grid; gap: var(--gap-group); align-items: start; }
  .split-text { display: grid; gap: var(--gap-group); align-content: start; min-inline-size: 0; }
  .columns { display: grid; gap: var(--gap-group); align-items: start; }
  @container view (min-width: 40rem) {
    .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--gap-section); }
    .split-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
    .columns { grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); column-gap: var(--gap-section); }
  }

  /* Ring-Raster: Zeilen weiter auseinander als Spalten */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--disc) + 1rem), 1fr));
    gap: var(--gap-group) var(--gap-item);
  }
  .grid-sm { --disc: 110px; }

  /* Zentrierter Block (Quiz, Bestätigungen) */
  .center { display: grid; justify-items: center; text-align: center; gap: var(--gap-item); }
  .center .lede { margin-inline: auto; }

  /* Fließtext: Absätze Element-Abstand, Zwischenüberschrift Gruppen-Abstand davor */
  .prose { display: grid; gap: var(--gap-item); max-inline-size: var(--measure); align-content: start; }
  .prose > h2 { margin-block-start: calc(var(--gap-group) - var(--gap-item)); }
  .prose > h2:first-child { margin-block-start: 0; }
  .prose > h2 + * { margin-block-start: calc(var(--gap-tight) - var(--gap-item)); }
  .prose a { text-decoration: underline; text-decoration-color: var(--color-line); text-underline-offset: 0.2em; }
  .prose ul { padding-inline-start: 1.2em; display: grid; gap: var(--gap-tight); }
}