/* Darstellung der Beispiel-Quittung — identisch auf /beleg und in der App-Demo.
   Alle Maße hängen an --s, damit dasselbe Markup im Telefon der Demo einfach
   kleiner gesetzt werden kann (statt es zu skalieren oder doppelt zu pflegen).
   Bewusst fester Hell-Modus: eine Quittung ist ein Papierdokument. */
.doc {
  --s: 14px;
  background: #fff;
  color: #1a1a1a;
  padding: calc(var(--s) * 2.1) calc(var(--s) * 2) calc(var(--s) * 1.9);
  font: 400 var(--s)/1.45 -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.doc .mono { font-family: ui-monospace, "SF Mono", Menlo, "Courier New", monospace; }

.doc-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: calc(var(--s) * 1.1);
  border-bottom: calc(var(--s) * .21) solid #ffc107;
  padding-bottom: calc(var(--s) * .93);
}
.doc-issuer { max-width: 60%; }
.doc-co { font-weight: 700; font-size: calc(var(--s) * 1.07); }
.doc-line { color: #444; font-size: calc(var(--s) * .89); margin-top: calc(var(--s) * .14); }
.doc-title { text-align: right; flex: 0 0 auto; }
.doc-title h1 { margin: 0; font-size: calc(var(--s) * 1.86); letter-spacing: .04em; font-weight: 700; }
.doc-num { font-size: calc(var(--s) * .93); margin-top: calc(var(--s) * .36); color: #444; }

.doc table { width: 100%; border-collapse: collapse; }
.doc-rows { margin-top: calc(var(--s) * 1.57); }
.doc-rows td { padding: calc(var(--s) * .64) 0; vertical-align: top; border-bottom: 1px solid #ececec; }
.doc td.l { color: #555; width: 48%; }
.doc td.v { text-align: right; font-weight: 600; }

.doc-sum { margin-top: calc(var(--s) * 1.57); }
.doc-sum td { padding: calc(var(--s) * .36) 0; border: 0; }
.doc-sum .tot td {
  border-top: calc(var(--s) * .14) solid #1a1a1a;
  font-size: calc(var(--s) * 1.29); font-weight: 800; padding-top: calc(var(--s) * .64);
}
.doc-sum .tip td {
  color: #555; font-weight: 600; font-size: calc(var(--s) * .93); padding-top: calc(var(--s) * .71);
}

/* Aufbau wie .sign im App-PDF: Unterschrift im normalen Fluss über der Linie,
   nicht absolut darüber — sonst ragt sie in den Betragsblock hinein. */
.doc-sign { margin-top: calc(var(--s) * 2); width: 62%; }
.doc-sigwrap { text-align: center; }
.doc-sigimg { display: inline-block; height: calc(var(--s) * 3.4); max-width: 80%;
  object-fit: contain; margin-bottom: calc(var(--s) * -0.4); }
.doc-signline { border-top: 1px solid #888; padding-top: calc(var(--s) * .36);
  color: #555; font-size: calc(var(--s) * .89); }
/* Rechnungsfahrt: Aussteller und Kunde nebeneinander (.sign--two im App-PDF) */
.doc-signs { display: flex; justify-content: space-between; gap: calc(var(--s) * 1.4); align-items: flex-end; }
.doc-signs .doc-sign { width: 46%; }
/* TSE-Fußnote unter der Unterschrift (.tsenote: 8 pt, #888, 78 % Breite) */
.doc-tse {
  margin-top: calc(var(--s) * 1.5); max-width: 78%;
  color: #888; font-size: calc(var(--s) * .67); line-height: 1.4;
}
/* Marken-Fuß (.brandfoot): rechtsbündig, Trennlinie, zwei Zeilen */
.doc-foot {
  margin-top: calc(var(--s) * 2); padding-top: calc(var(--s) * .6);
  border-top: 1px solid #e6e6e6;
  display: flex; flex-direction: column; align-items: flex-end;
}
.doc-f1 { font-weight: 700; color: #333; font-size: calc(var(--s) * .79); white-space: nowrap; }
.doc-fi { display: inline-block; width: calc(var(--s) * .93); height: calc(var(--s) * .93);
  vertical-align: -.16em; margin: 0 calc(var(--s) * .12) 0 calc(var(--s) * .2); }
.doc-fw { display: inline-block; height: calc(var(--s) * .72); width: auto; vertical-align: -.1em; }
.doc-f2 { margin-top: calc(var(--s) * .2); color: #666; font-size: calc(var(--s) * .71); }