/* =================================================================
   UXOVIA · UEBER-SEITE
   Nur was diese Seite braucht: der etwas flacher schliessende Hero,
   die Substanz-Marken, der Fragenblock, die beiden Gruenderkarten
   und die Betreiber-Zeile. Alles uebrige kommt aus components.css.

   Angelegt am 26.08.2026 mit dem neuen Seitentext. Die Werte lagen
   vorher als style-Attribute im HTML; die Regel dagegen steht in
   CLAUDE.md, und die Seite haelt sie jetzt vollstaendig ein.
   ================================================================= */

/* ── Hero ──────────────────────────────────────────────────────── */
/* Nach unten kuerzer als die Standardhoehe: darunter beginnt sofort
   ein Textabschnitt, keine Bildflaeche, die Luft braucht. */
.ueber-hero            { padding-bottom: clamp(2rem, 5vw, 4rem); }
.ueber-hero-pill       { margin-bottom: var(--s-5); }
.ueber-hero-titel      { max-width: 24ch; margin-inline: auto; }
.ueber-hero-lead       { max-width: 62ch; margin: var(--s-6) auto 0; }

/* ── Fliesstext in Abschnitten ─────────────────────────────────── */
/* Mehrere Absaetze hintereinander. Abstand ueber gap, nicht ueber
   margin: dann kollabiert nichts und der letzte Absatz schiebt die
   Sektion nicht auf. */
.ueber-fliess          { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
/* Schmale Spalte ohne eigenes Seitenpolster: liegt bereits in .container,
   ein zweites Polster wuerde sich auf dem Telefon aufaddieren. */
.ueber-schmal          { max-width: var(--container-narrow); margin-inline: auto; }
.ueber-h2              { margin: var(--s-4) 0 var(--s-5); }
.ueber-karte-text      { margin-top: var(--s-4); }
.ueber-ziel-text       { margin-bottom: var(--s-5); }
/* 26ch statt der 18ch, mit denen die kurze Frage von vorher auskam: die
   neue laeuft sonst auf dem Rechner in fuenf kurze Zeilen. balance verteilt
   die Zeilen gleichmaessig, wo der Browser es kann. */
.ueber-cta-titel       { margin: var(--s-4) auto var(--s-5); max-width: 26ch; text-wrap: balance; }

/* ── Substanz-Marken ───────────────────────────────────────────── */
/* Die fuenf Posten stehen im Text als Aufzaehlung in einem Satz.
   Nebeneinander als Marken sind sie auf einen Blick erfassbar. */
.ueber-marken {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  list-style: none; padding: 0; margin: 0;
}
/* .tag steht sonst auf nowrap. Die laengste Marke waere damit auf 320px
   breiter als die Spalte. */
.ueber-marken .tag { white-space: normal; }

/* ── Fragenblock ───────────────────────────────────────────────── */
/* Drei Fragen aus dem Text, abgesetzt vom Absatz darum. Der Balken
   links ersetzt ein Aufzaehlungszeichen: es sind keine Punkte einer
   Liste, sondern Fragen, die nebeneinander stehen. */
.ueber-fragen {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.ueber-fragen li {
  position: relative; min-width: 0;
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text);
}
.ueber-fragen li::before {
  content: ""; position: absolute; left: 0; top: var(--s-2); bottom: var(--s-2);
  width: 2px; border-radius: var(--r-xs); background: var(--gradient-brand);
}

/* ── Gruenderkarten ────────────────────────────────────────────── */
/* Masse aus der Zielvorlage vom 31.08.2026, dort am Bild nachgemessen:
   Karte 529 breit und 722 hoch, davon 356 Bildflaeche, der Rest Text.
   Uebertragen auf unser Raster: 1120 breit, zwei Karten zu 548 mit 24
   Abstand, Bildflaeche im selben Verhaeltnis 529 zu 356.

   Abstaende im Textteil, ebenfalls aus der Vorlage abgelesen (Bildkante
   bis Name 18, Name bis Perspektive 18, Perspektive bis Kompetenzanker
   20, Kompetenzanker bis Trennlinie 18, Trennlinie bis Zitat 22, Zitat
   bis Kartenrand 34). Mit dem gap von 12 und den Polstern unten kommen
   die gerenderten Abstaende auf 20, 12, 12, 17, 20 und 37.

   Die Portraitdateien liegen unbeschnitten so, wie sie geliefert wurden.
   Verschoben wird nur der sichtbare Ausschnitt, je Person eigener Wert:
   die Kopfoberkanten stehen in beiden Dateien gleich hoch, die Augen
   nicht. Erst die Verschiebung bringt beide Augenlinien auf eine Hoehe. */
.ueber-gruender { max-width: 1120px; margin-inline: auto; }

.ueber-person {
  display: flex; flex-direction: column;
  height: 100%; min-width: 0;
  padding: 0;
  border-radius: var(--r-xl);
}
/* .glass hellt sich beim Ueberfahren auf. Bei einer Textkarte faellt das
   kaum auf, ein aufhellendes Portrait dagegen sieht nach Effekt aus. */
.ueber-person:hover { filter: none; }

.ueber-person-bild { min-width: 0; aspect-ratio: 529 / 356; }
.ueber-person-bild img { width: 100%; height: 100%; object-fit: cover; }
/* 16 Prozent statt 0: Michaels Stirn ist hoeher, seine Augen liegen in
   der Datei 68 Pixel tiefer als Daniels. Ohne diesen Versatz saesse
   Daniel hoeher im Bild. */
.ueber-person-bild--michael img { object-position: 50% 16%; }
.ueber-person-bild--daniel  img { object-position: 50%  0%; }

.ueber-person-inhalt {
  display: flex; flex-direction: column; gap: var(--s-3);
  flex: 1; min-width: 0;
  padding: var(--s-4) var(--s-6) var(--s-6);
}
.ueber-person-name {
  font-size: var(--t-h3); font-weight: var(--w-semi);
  letter-spacing: var(--tr-h); margin: 0;
}
/* Die Perspektivzeile hat nur Mittelpunkte als Trennstellen. Ohne
   Umbruchfreigabe schiebt sie auf 320px die Karte auseinander.
   --brand-text statt --brand: nur der dunklere Ton haelt auf dieser
   Flaeche den Kontrastwert. */
.ueber-person-rolle {
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: var(--tr-mono);
  color: var(--brand-text);
  margin: 0; min-width: 0;
}
.ueber-person-anker {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-2);
  margin: 0; min-width: 0;
}
.ueber-person-zitat {
  margin: 0; padding-top: var(--s-4);
  border-top: 1px solid var(--border-faint);
}
/* Gleiche Groesse und Zeilenhoehe wie der uebrige Fliesstext, nur im
   Gewicht leichter: sechs Zeilen in 400 auf dunklem Grund stehen sonst
   als geschlossener Block in der Karte. */
.ueber-person-zitat p {
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: var(--w-light);
  line-height: var(--lh-body);
  color: var(--text);
  margin: 0;
}
.ueber-verbindung {
  margin: var(--s-7) auto 0; max-width: 40ch; text-align: center;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: var(--lh-h);
  color: var(--text);
}

/* ── Gestaffeltes Einblenden ───────────────────────────────────── */
/* Ersetzt die --reveal-delay-Werte, die sonst als style-Attribut an
   jeder einzelnen Karte haengen. */
.ueber-staffel > *:nth-child(2) { --reveal-delay:  80ms; }
.ueber-staffel > *:nth-child(3) { --reveal-delay: 160ms; }
.ueber-staffel > *:nth-child(4) { --reveal-delay: 240ms; }