/* Fuer Unternehmen — der Beispielbedarf.
 *
 * Vier Angaben, gesetzt als ein Satz statt als Formular oder Dashboard:
 * wer die Zeile liest, weiss in fuenf Sekunden, was eine Anfrage von
 * ihm verlangt. Das ist der Einstiegsvorteil dieser Seite.
 *
 * Die Regeln lagen als `.ls-*` (Leitstand) in editorial.css und trugen
 * dort einen Namen aus einer Bauform, die es nicht mehr gibt.
 */

/* Ohne Einzug: `--text-indent` gehoerte zur Markerspalte der alten
   Kapitelform, die diese Seite nicht mehr hat. Der Einzug erzeugte
   sonst eine zweite linke Kante bei 306px neben den 148px des
   uebrigen Inhalts. */
.un-track {
  margin-block-start: clamp(2rem, 5vw, 3.5rem);
  padding-block-start: clamp(1.2rem, 2.5vw, 1.8rem);
  border-block-start: 1px solid rgba(24, 60, 63, 0.18);
}
.un-sentence {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* Enger Zeilenabstand, damit die Bloecke als Satz zusammenhaengen.
     Erster Anlauf hatte 32ch Breite und 2.3rem Werte — daraus wurde
     eine vertikale Formularliste mit den Bindewoertern am Zeilenende. */
  gap: clamp(0.5rem, 1vw, 0.9rem) clamp(0.7rem, 1.5vw, 1.2rem);
  margin: 0;
  max-width: 54ch;
}
.un-slot {
  display: inline-grid;
  gap: 0.2rem;
}
/* Bedarfsspur: die fünf Angaben docken nacheinander ein — lokale
   .rv-Staffel (120 ms), damit die Reihenfolge lesbar bleibt. */
.un-sentence { --rv-stufe: 120ms; --rv-max: 520ms; }
.un-key {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gray) 78%, transparent);
}
.un-val {
  font-family: var(--font-display);
  /* Kleiner als im ersten Anlauf: bei 2.3rem passte kein Satz mehr in
     eine Zeile, jeder Wert stand allein. */
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--petrol);
}
.un-join {
  align-self: end;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gray);
  padding-block-end: 0.15rem;
}
/* Auf dem Telefon zerfaellt der Satz ohnehin in Zeilen. Dann tragen die
   Bindewoerter nichts mehr und jedes Feld bekommt die volle Breite. */
@media (max-width: 860px) {
  .un-track { margin-inline-start: 0; }
  .un-sentence { max-width: none; }
  .un-join { display: none; }
  .un-slot { width: 100%; }
}