/* ============================================================
   VCI Design — Ueber uns
   Sitemap Abschnitt 2, dort ausdruecklich nur als "kurz"
   spezifiziert. Nur Startseite.

   Abgrenzung nach oben ohne neue Farben oder Tokens: als einzige
   Sektion der Seite zentriert und in schmaler Spalte, ohne
   Trennlinien zwischen Eintraegen, ohne Links, ohne Indikatoren.
   Das Index-Muster des Arbeiten-Teasers wird nicht wiederholt.
   ============================================================ */

.ueber {
  text-align: center;
}

/* Schmale Spalte. Zentrierter Text braucht eine kurze Zeile,
   sonst verliert das Auge beim Ruecksprung die naechste. */
.ueber__spalte {
  max-width: 46rem;
}

.ueber__label {
  font-family: var(--font-text);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-text);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.ueber__statement {
  margin-top: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--text-display-medium);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-semibold);
  color: var(--color-fg);
  text-wrap: balance;
}

.ueber__notiz {
  margin-top: var(--space-l);
  color: var(--color-fg-muted);
  text-wrap: pretty;
}

/* --- Personen ------------------------------------------------
   Bewusst klein und ohne Hierarchieanspruch. Die Linie steht in
   --color-border und NICHT in --color-accent: die Akzentfarbe
   markiert auf dieser Seite Highlights, eine reine Zierlinie
   wuerde sie verwaessern (Abschnitt 1.1).
   ------------------------------------------------------------ */
.ueber__personen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-l) var(--space-xl);
  margin-top: var(--space-xl);
}

.person {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
  min-width: 10rem;
}

.person__name {
  font-size: var(--text-medium);
  font-weight: var(--weight-semibold);
  color: var(--color-fg);
}

.person__rolle {
  font-size: var(--text-small);
  color: var(--color-fg-muted);
}

/* --- Grenze zur CTA-Flaeche ------------------------------------
   Derselbe Bauplan wie .hero__rule, nur in Schwarz: 2 Pixel hoch,
   --space-xl breit, zentriert. Das Cyan
   ist auf dieser Seite der Akzent und markiert Highlights. Eine
   Sektionsgrenze ist kein Highlight, deshalb --color-fg.

   Oben --space-xxl Abstand, also derselbe Wert, den die Sektion
   nach unten als Polster traegt. Die Linie sitzt damit mittig
   zwischen dem letzten Namen und der schwarzen Kante und haelt zu
   ihr 64 bis 128 Pixel Abstand. Sie soll die Flaeche ankuendigen,
   nicht mit ihr verschmelzen.
   ------------------------------------------------------------ */
.ueber__grenze {
  display: block;
  width: var(--space-xl);
  height: 2px;
  margin-top: var(--space-xxl);
  margin-inline: auto;
  background-color: var(--color-fg);
}

@media (max-width: 768px) {
  .ueber__personen {
    gap: var(--space-l);
  }

  .person {
    width: 100%;
  }
}