/* =========================================================================
   idf-info-grid - Lese-Raster: Beschriftung klein links, Wert gross rechts.

   Fuer Angaben in einem Fenster, die man liest und nicht aendert: der Stand
   eines Abgleichs, Zeitpunkte, das Urteil einer Pruefung. Beschriftung in
   Meta-Groesse (12 px), Wert in Inhalts-Groesse (16 px) wie eine Zelle.
   Nur CSS, das Markup schreibt das Modul. Siehe README.md.

   Entstanden im Webservice (.ws-modal-info, .ws-info-grid) und mit dem
   Umzug der Seite Inhalte in die App Content-Service hierher gezogen
   (Issue 1875). Die Werte sind dieselben.
   ========================================================================= */

/* Grauer Kasten um ein Raster, wenn es zwischen Feldern eines Formulars
   steht und sich davon absetzen soll. */
.idf-info-box {
  padding: var(--space-3);
  background: var(--ink-4);
  border-radius: var(--radius-xs);
}

/* Zwei Spalten: die Beschriftung nimmt, was sie braucht, der Wert den Rest.
   Kinder im Wechsel <span> (Beschriftung) und <strong> (Wert). */
.idf-info-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
}
.idf-info-grid > span {
  font-size: var(--font-xs2);
  color: var(--ink-75);
}
.idf-info-grid > strong {
  font-size: var(--font-base);
  font-weight: var(--weight-semi);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Der Wert ist ein ganzer Satz statt eines Kennwerts: normale Staerke,
   halbfett liest sich ueber mehrere Zeilen schwer. */
.idf-info-grid.is-fliesstext > strong {
  font-weight: var(--weight-regular);
}