einvoice/templates/invoice.html.j2

<!doctype html>
<html lang="{{ meta.language or 'de' }}">
<head>
  <meta charset="utf-8">
  <title>Rechnung {{ meta.invoice_number }}</title>
  <style>
    @page {
      size: A4; margin: 18mm 17mm 21mm;
      @bottom-left { content: "{{ seller.name | replace('"', '') }}"; font-family: sans-serif; font-size: 8pt; color: #64748b; }
      @bottom-right { content: "Seite " counter(page) " von " counter(pages); font-family: sans-serif; font-size: 8pt; color: #64748b; }
    }
    * { box-sizing: border-box; }
    body { font-family: "DejaVu Sans", sans-serif; font-size: 9pt; color: #1e293b; line-height: 1.55; }
    .row { display: flex; justify-content: space-between; gap: 16px; }
    .muted { color: #64748b; }
    h1 { color: #123655; font-size: 30pt; font-weight: 500; letter-spacing: -1px; margin: 0 0 12px; }
    .box { border: 1px solid #e2e8f0; border-radius: 6px; padding: 14px; }
    .row:first-of-type { margin-top: 20px; }
    .box .muted:first-child { font-size: 8pt; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 7px; }
    table { width: 100%; border-collapse: collapse; margin-top: 24px; }
    thead { display: table-header-group; }
    tr { break-inside: avoid; }
    th, td { padding: 10px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid #e2e8f0; }
    th { color: white; background: #123655; font-size: 7pt; font-weight: 500; }
    tbody tr:nth-child(even) { background: #f8fafc; }
    .right { text-align: right; }
    td.right { white-space: nowrap; }
    .totals { margin-top: 16px; width: 58%; margin-left: auto; break-inside: avoid; }
    .totals td { border: none; padding: 5px 7px; font-size: 8.5pt; }
    .totals tr:last-child td { background: #edf4fa; color: #123655; border-top: 2px solid #123655; padding-top: 12px; padding-bottom: 12px; font-size: 11pt; }
    .footer { margin-top: 28px; font-size: 8.5pt; border-top: 1px solid #e2e8f0; padding-top: 12px; }
    .footer strong { color: #123655; }
  </style>
</head>
<body>
  <div style="margin-bottom: 12px;">
    <img src="assets/logo.svg" alt="Logo" style="height: 42px;" />
  </div>

  <div class="row">
    <div style="flex: 1;">
      <h1>Rechnung</h1>
      <div class="muted">Rechnungsnummer: <strong>{{ meta.invoice_number }}</strong></div>
      <div class="muted">Rechnungsdatum: {{ meta.invoice_date | de_date }}</div>
      {% if meta.service_period_start %}
      <div class="muted">Leistungszeitraum: {{ meta.service_period_start | de_date }} – {{ meta.service_period_end | de_date }}</div>
      {% else %}<div class="muted">Leistungsdatum: {{ meta.service_date | de_date }}</div>{% endif %}
      {% if meta.buyer_reference %}<div>Kundenreferenz: {{ meta.buyer_reference }}</div>{% endif %}
      {% if meta.order_reference %}<div>Bestellung: {{ meta.order_reference }}</div>{% endif %}
    </div>
    <div class="box" style="min-width: 260px;">
      <div><strong>{{ seller.name }}</strong></div>
      <div>{{ seller.address.street }}</div>
      <div>{{ seller.address.postal_code }} {{ seller.address.city }}</div>
      <div>{{ seller.address.country }}</div>
      {% if seller.vat_id %}<div>USt-IdNr: {{ seller.vat_id }}</div>{% endif %}
      {% if seller.tax_number %}<div>Steuernr: {{ seller.tax_number }}</div>{% endif %}
      {% if seller.email %}<div>{{ seller.email }}</div>{% endif %}
    </div>
  </div>

  <div class="row" style="margin-top: 16px;">
    <div class="box" style="flex: 1;">
      <div class="muted">Rechnung an</div>
      <div><strong>{{ buyer.name }}</strong></div>
      <div>{{ buyer.address.street }}</div>
      <div>{{ buyer.address.postal_code }} {{ buyer.address.city }}</div>
      <div>{{ buyer.address.country }}</div>
      {% if buyer.vat_id %}<div>USt-IdNr: {{ buyer.vat_id }}</div>{% endif %}
    </div>

    <div class="box" style="flex: 1;">
      <div class="muted">Zahlungsinformationen</div>
      <div>Fällig am: {{ payment.due_date | de_date }}</div>
      <div>Verwendungszweck: {{ payment.reference }}</div>
      {% if payment.iban %}<div>IBAN: {{ payment.iban }}</div>{% endif %}
      {% if payment.bic %}<div>BIC: {{ payment.bic }}</div>{% endif %}
      {% if payment.bank_name %}<div>Bank: {{ payment.bank_name }}</div>{% endif %}
    </div>
  </div>

  <table>
    <thead>
      <tr>
        <th>Pos.</th>
        <th>Beschreibung</th>
        <th class="right">Menge</th>
        <th>Einheit</th>
        <th class="right">Einzelpreis (netto)</th>
        <th class="right">Steuer</th>
        <th class="right">Summe (netto)</th>
      </tr>
    </thead>
    <tbody>
      {% for it in items %}
      <tr>
        <td>{{ loop.index }}</td>
        <td>
          <strong>{{ it.name }}</strong><br>
          {% if it.description %}<span class="muted">{{ it.description }}</span>{% endif %}
        </td>
        <td class="right">{{ number(it.quantity) }}</td>
        <td>{{ unit_label(it.unit) }}</td>
        <td class="right">{{ price(it.unit_price_net) }}</td>
        <td class="right">{{ number(it.tax_rate) }}%</td>
        <td class="right">{{ money(it.line_total_net) }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <table class="totals">
    <tr><td class="right">Zwischensumme (netto):</td><td class="right"><strong>{{ money(totals.net_total) }}</strong></td></tr>
    {% for rate, tax in totals.tax_by_rate.items() %}
    <tr><td class="right">USt {{ rate }} % auf {{ money(totals.basis_by_rate[rate]) }}:</td><td class="right">{{ money(tax) }}</td></tr>
    {% endfor %}
    <tr><td class="right">USt gesamt:</td><td class="right"><strong>{{ money(totals.tax_total) }}</strong></td></tr>
    <tr><td class="right">Gesamt (brutto):</td><td class="right"><strong>{{ money(totals.gross_total) }}</strong></td></tr>
  </table>

  {% if meta.notes %}
  <div class="footer">
    <strong>Hinweise</strong><br>
    {{ meta.notes }}
  </div>
  {% endif %}


</body>
</html>