/* ==========================================================================
   SHANOVA — Container, Grid, Sektionen
   ========================================================================== */

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

.container--narrow { max-width: 860px; }
.container--wide   { max-width: 1440px; }

/* ---------- Sektionen ---------- */
.section {
  padding-block: var(--sh-section-y);
  position: relative;
}
.section--tight { padding-block: calc(var(--sh-section-y) * 0.6); }

.section--dark   { background: var(--sh-bg-800); }
.section--darker { background: var(--sh-bg-900); }

/* Helle Sektion als Kontrastfeld. Farbtokens werden lokal umgesetzt,
   damit Komponenten darin ohne Sonderregeln funktionieren. */
.section--light {
  background: var(--sh-paper);
  --sh-text: var(--sh-text-dark);
  --sh-text-2: var(--sh-text-dark-2);
  --sh-text-3: var(--sh-text-dark-3);
  --sh-line: var(--sh-line-light);
  --sh-bg-700: #FFFFFF;
  --sh-bg-600: var(--sh-paper-alt);
  --sh-bg-900: var(--sh-paper-alt);
  --sh-silver-300: var(--sh-text-dark-2);
  color: var(--sh-text-dark);
}
/* Gold traegt auf hellem Grund nicht als Text — dunklere Stufe erzwingen. */
.section--light a { color: var(--sh-gold-700); }
.section--light a:hover { color: var(--sh-gold-800); }
.section--light .eyebrow--gold { color: var(--sh-gold-700); }
.section--light code { color: var(--sh-gold-800); background: var(--sh-paper-alt); }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-12);
  flex-wrap: wrap;
}
.section__head h2 { margin-bottom: 0; }
.section__head .lead { margin-top: var(--sp-3); }
.section__head-text { max-width: 720px; }

/* ---------- Grid ---------- */
.grid {
  display: grid;
  gap: var(--sh-gutter);
  grid-template-columns: repeat(12, 1fr);
}

.cols-2 { display: grid; gap: var(--sh-gutter); grid-template-columns: repeat(2, 1fr); }
.cols-3 { display: grid; gap: var(--sh-gutter); grid-template-columns: repeat(3, 1fr); }
.cols-4 { display: grid; gap: var(--sh-gutter); grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  gap: calc(var(--sh-gutter) * 2);
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.split--wide-left  { grid-template-columns: 1.4fr 1fr; }
.split--wide-right { grid-template-columns: 1fr 1.4fr; }

/* Textspalte fuer Lesestrecken. */
.prose { max-width: 720px; }
.prose h2 { margin-top: var(--sp-12); }
.prose h3 { margin-top: var(--sp-8); }
.prose > :first-child { margin-top: 0; }

/* Artikel mit klebendem Inhaltsverzeichnis. */
.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) 260px;
  gap: calc(var(--sh-gutter) * 2);
  align-items: start;
}

@media (max-width: 1279px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr) 240px; }
}

@media (max-width: 1023px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; gap: var(--sp-12); }
  .doc-layout { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(4, 1fr); }
  .section__head { margin-bottom: var(--sp-8); }
}