/* „Über NotarFlow" — die Drittlizenzen (A3, Sprint 4).
 *
 * Eigene Datei aus demselben Grund wie `regeln.css` und `sperre.css`: der
 * Anbau hängt an einer Zeile in `index.html` und fasst `notarflow.css` nicht
 * an — dort arbeiten in jeder Welle mehrere Sessions gleichzeitig. Die Hülle
 * kommt von `nf-ui.dialog()`, hier steht nur der Inhalt.
 */

.ueber-fassungszeile {
  margin: 0 0 4px; font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 12.5px; color: var(--ink);
}
.ueber-hinweis {
  margin: 0 0 14px; font-size: 11.5px; color: var(--ink-soft); line-height: 1.5;
}
.nf-koerper > h3 {
  margin: 16px 0 6px; font-size: 12px; color: var(--ink-soft);
  text-transform: none; letter-spacing: 0.02em;
}

/* Eine Zeile je Komponente: Name, Fassung, Lizenz, und — wo einer beiliegt —
   der Knopf zum Text. Die Lizenz steht rechtsbündig, weil man die Spalte
   überfliegt und nicht liest. */
.ueber-zeile {
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.ueber-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ueber-fassung {
  flex: none; font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--ink-soft);
}
.ueber-lizenz {
  flex: none; max-width: 45%; text-align: right;
  font-size: 11.5px; color: var(--ink-soft); overflow-wrap: anywhere;
}
.ueber-knopf {
  flex: none; background: none; border: none; padding: 0 0 0 2px;
  color: var(--blau); font-size: 11px; text-decoration: underline;
}

/* Der Lizenztext selbst: unverändert, umbrechend, scrollbar. Ein Lizenztext,
   der seitlich aus der Karte läuft, ist keiner. */
.ueber-text {
  margin: 12px 0 0; max-height: 52vh; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 1.55; color: var(--ink);
}

/* Der Rückweg ist ein Textknopf und kein Balken: `.knopf` streckt sich über
   die Karte, und ein blauer Balken über einem Lizenztext liest sich wie eine
   Handlung, die es nicht gibt. */
.ueber-zurueck {
  background: none; border: none; padding: 0;
  color: var(--blau); font-size: 11.5px; text-decoration: underline;
}