/* ==========================================================================
   Etappe 2 – Content-Säulen (#pillars)
   Kein Kartenset, sondern ein ruhiges Register: Haarlinien trennen die vier
   Felder, die Titel tragen die Hierarchie. Keine Nummerierung, weil die vier
   Säulen keine Reihenfolge sind.
   ========================================================================== */

.pillars__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-s);
  align-items: baseline;
}

.pillars__title {
  grid-column: 1 / span 5;
  color: var(--heading);
  font-size: var(--step-3);
  font-variation-settings: "SOFT" 100;
}

.pillars__note {
  grid-column: 7 / span 5;
  max-width: 40ch;
  color: var(--fg-soft);
}

.pillars__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-2xl);
  margin: 0;
  margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  padding: 0;
  list-style: none;
}

.pillar {
  border-top: 1px solid var(--line);
  padding-top: var(--space-m);
}

.pillar__name {
  color: var(--heading);
  font-size: clamp(1.5rem, 1.333rem + 0.741vw, 2rem);
  font-variation-settings: "SOFT" 100;
  line-height: 1.2;
}

.pillar__text {
  max-width: 44ch;
  margin-top: var(--space-2xs);
}

@media (max-width: 56rem) {
  .pillars__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .pillars__title,
  .pillars__note {
    grid-column: 1;
  }

  .pillars__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-xl);
  }
}