/* ==========================================================================
   Seite: Über uns (Unternehmen/UeberUns.aspx)
   Inhalt: Kopf mit Firmenname (.page-hero, siehe Infoseite.css), vier
   Kennzahl-Kacheln, Karten «Unser Ziel» und «MECHANIK 3000 ERP» nebeneinander
   Bausteine aus Global.css: .card, .icon, .plain-list
   ========================================================================== */

/* Abschnitte untereinander, überall gleicher Abstand */
.about-index-page {
  display: grid;
  gap: 1.25rem;
}

.about-index-page .page-hero {
  margin-bottom: 0;
}

/* ==========================================================================
   Kennzahlen: 1996 / 30+ Jahre / seit 1989 / Schweiz
   ========================================================================== */
.about-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

/* Eine Kachel: Icon links, Zahl und Beschriftung rechts */
.about-facts li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
}

.about-facts strong {
  display: block;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--dark-heading, var(--color-heading));
}

.about-facts li span span {
  font-size: 0.85rem;
  color: var(--dark-copy, var(--color-copy));
}

/* ==========================================================================
   «Unser Ziel» und «MECHANIK 3000 ERP»: zwei Karten nebeneinander
   ========================================================================== */
.about-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.about-box {
  padding: 1.8rem 2rem;
}

.about-box h2 {
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
}

.about-box p {
  margin: 0;
  line-height: 1.6;
}

/* Link «Mehr zu MECHANIK 3000» (Aussehen: .link-arrow in Global.css) */
.about-box .link-arrow {
  display: inline-block;
  margin-top: 0.9rem;
}

/* ==========================================================================
   Tablet: Kennzahlen 2 x 2, Karten untereinander; Handy: alles einspaltig
   ========================================================================== */
@media (max-width: 900px) {
  .about-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .about-facts {
    grid-template-columns: 1fr;
  }

  .about-box {
    padding: 1.4rem 1.2rem;
  }
}