/* ==========================================================================
   Dokumentfuss am Bildschirm
   --------------------------------------------------------------------------
   Das Druckbild steht in druck.css. Hier steht nur, wie der Block aussieht,
   solange er noch auf dem Schirm ist.

   Warum eine eigene Datei und nicht ein Abschnitt in styles.css: An styles.css
   arbeitet gerade jemand anderes. Zwei Haende in derselben Datei kosten mehr
   Zeit, als eine zusaetzliche Zeile im Kopf der Seite je kosten wird.
   ========================================================================== */

.dokfuss {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Am Bildschirm klein: Wer vor dem Rechner sitzt, klickt. Der Code ist fuer
   den Fall gedacht, dass man den Rapport aufs eigene Handy holen will -
   gross genug zum Scannen aus etwa 20 cm, mehr braucht es nicht. */
.dokfuss-qr {
  flex: 0 0 88px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.dokfuss-qr svg { display: block; width: 100%; height: auto; }

.dokfuss-text {
  min-width: 0;                 /* sonst sprengt die lange Adresse die Zeile */
  font-size: .78rem;
  line-height: 1.5;
  /* --text-muted und --text-primary, nicht --muted und --text: Die beiden
     kuerzeren Namen gibt es nicht. styles.css fuehrt sie als --text-muted
     (Zeile 13) und --text-primary (Zeile 9). Ohne Ersatzwert wird eine
     Deklaration mit unbekannter Eigenschaft zur Rechenzeit ungueltig, und
     color faellt auf den geerbten Wert zurueck – im Browser nachgemessen
     rechneten .dokfuss-text, .dokfuss-titel und .dokfuss-url alle auf
     rgb(11,11,11), der Fussblock stand also in voller Textfarbe und der
     Titel hob sich von den Zeilen darunter nicht mehr ab. Nur am
     Bildschirm; fuer Papier setzt druck.css ohnehin #000. */
  color: var(--text-muted);
}
.dokfuss-titel { font-weight: 600; color: var(--text-primary); }
.dokfuss-url {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .72rem;
  word-break: break-all;
}

/* Die Pruefsumme: dieselbe eine Form wie auf Papier.
 *
 * Die Begruendung – welche drei Schreibweisen es gab, warum nur die volle
 * Form durch die Pruefstelle kommt und warum die Breite 22ch ist – steht
 * einmal, in druck.css Abschnitt 10. Hier steht nur, was am Bildschirm
 * anders ist: die Schriftgroesse folgt der Adresse darueber, und ein Klick
 * greift die ganze Summe (user-select), weil hier kopiert und nicht
 * abgetippt wird.
 *
 * Vier Zeilen zu vier Gruppen heisst vollstaendig. Steht die Summe in einer
 * Zeile, ist sie gekuerzt und die Pruefstelle wird sie zurueckweisen.
 */
.dokfuss-summe { margin-top: 2px; }
.dokfuss-summe code {
  display: block;
  width: 22ch;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .72rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: lowercase;
  white-space: normal;
  word-break: normal;         /* ausdruecklich nicht break-all: das zerriss die Vierergruppe */
  overflow-wrap: anywhere;    /* Notbremse, greift erst wenn eine Gruppe allein nicht passt */
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0, "liga" 0;
  font-variant-numeric: slashed-zero;
  user-select: all;
}

/* Auf schmalen Geraeten untereinander – nebeneinander bliebe fuer den Text
   eine Spalte von vier Zeichen Breite. */
@media (max-width: 460px) {
  .dokfuss { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dokfuss-qr { flex: 0 0 auto; width: 96px; }
}

/* Im dunklen Bild bleibt der Code weiss hinterlegt. Ein invertierter
   QR-Code laesst sich zwar theoretisch lesen, aber viele Kamera-Apps
   versuchen es gar nicht erst. */
[data-theme="dark"] .dokfuss-qr { background: #fff; }