<html>
  <head>
    <meta charset="UTF-8" />
    <title>{{data.object.header}}</title>
    
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap"
  rel="stylesheet"
/>

    <style>
      /* {{#parameter.color}}
      :root {
        --accent-color: {{parameter.color}};
      }
      {{/parameter.color}} */
      
:root,
html {
  --font-body: "Inter", sans-serif;
  --font-heading: var(--font-body);

  --text-xs: 6pt;
  --text-sm: 7pt;
  --text-md: 8pt;
  --text-body: 9pt;
  --text-lg: 9.5pt;
  --text-title: 12.5pt;
  --text-brand: 14pt;

  --weight-light: 200;
  --weight-regular: 300;
  --weight-medium: 500;

  --color-text: #000;
  --color-text-secondary: #333;
  --color-muted: #888;
  --color-rule: #cfcfcf;
  --color-rule-strong: #000;
  --color-page-count-bg: #f0f0f0;
  --color-heading-bg: #f4f4f4;
  --color-accent: #0076b9;

  --space-1: 1mm;
  --space-2: 2mm;
  --space-3: 3mm;
  --space-4: 4mm;
  --space-6: 6mm;
  --space-8: 8mm;
  --space-10: 10mm;
  --space-12: 12mm;
  --space-14: 14mm;

  --qr-size: 12mm;
  --rule: 0.4mm;
  --rule-hairline: 0.25mm;
  --leading: 1.5;
  --foot-text-term-icon: none;

  --brand-weight: 700;
  --label-transform: uppercase;
  --label-tracking: 0.25pt;
  --table-header-color: #fff;
  --table-header-bg: var(--color-accent);
  --table-header-border-bottom: none;
  --table-gutter: 2.5mm;
  --table-heading-indent: 0;
  --table-row-stripe: var(--color-heading-bg);
  --table-position-rule: none;
}

@page {
  size: A4 portrait;
  /* Literal values: custom properties are not applied in the @page context. */
  /* 35mm top margin; address window sits 5mm into the body. 25mm left/right. */
  margin: 35mm 25mm 52mm 25mm;

  @top-left {
    content: element(headerIdentifier);
    vertical-align: top;
  }

  @bottom-left {
    content: element(footerIdentifier);
  }

  @left-middle {
    content: element(foldlinesIdentifier);
  }
}

@page :first {
  @top-right {
    content: element(qrcodeIdentifier);
    vertical-align: top;
    text-align: right;
    /* Keep a column for the QR so a wide company name cannot collapse it. */
    width: 18mm;
  }
}

body {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  line-height: var(--leading);
  margin: 0;
  counter-reset: position;
  font-size: var(--text-body);
}

h1 {
  font-family: var(--font-heading, var(--font-body));
  color: var(--color-text);
  font-size: var(--text-brand);
}

.partialInvoiceCalculation {
  font-size: var(--text-title);
}

p {
  margin: var(--space-2) 0;
}

.right {
  text-align: right;
}

.document-header {
  position: running(headerIdentifier);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-top: 22mm;
}

.document-header__brand {
  min-width: 0;
}

.header__name {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-heading, var(--font-body));
  font-weight: var(--brand-weight, var(--heading-weight, inherit));
  line-height: var(--heading-leading, 75%);
  letter-spacing: var(--heading-tracking, normal);
  color: var(--accent-color, var(--color-accent));
  overflow-wrap: anywhere;
}

.header__logo {
  margin: 0;
}

.header__logo .logo {
  display: block;
  max-width: 52mm;
  max-height: 12mm;
  width: auto;
  height: auto;
  object-fit: contain;
}

.header__qrcode {
  position: running(qrcodeIdentifier);
  width: var(--qr-size);
  padding-top: 22mm;
  text-align: right;
}

.header__qrcode .url-qrcode {
  display: inline-block;
  margin-left: auto;
  width: var(--qr-size);
  height: var(--qr-size);
}

footer {
  position: running(footerIdentifier);
}

.footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  column-gap: var(--space-2);
  width: 100%;
  font-size: var(--text-xs);
}

.footer__page-count {
  justify-self: end;
  align-self: end;
}

.page-count {
  text-align: right;
}

.page-count__inner {
  display: inline-flex;
  align-items: baseline;
  column-gap: 0.15em;
  padding: var(--page-count-padding, var(--space-1) var(--space-2));
  background-color: var(--color-page-count-bg);
  color: var(--page-count-color, inherit);
  border-radius: var(--page-count-radius, 0);
  border-bottom: var(--page-count-border-bottom, none);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: var(--page-count-transform, none);
  letter-spacing: var(--page-count-tracking, normal);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.page::before {
  content: counter(page);
}

.totalPages::before {
  content: counter(pages);
}

.footer__section {
  display: flex;
  flex-direction: column;
  align-self: start;
}

.footer__sender {
  word-wrap: anywhere;
}

.footer__label {
  font-weight: var(--weight-medium);
}

.url-qrcode {
  width: var(--qr-size);
  height: var(--qr-size);
  display: block;
  mix-blend-mode: var(--qr-blend, normal);
}

.url-qrcode img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.qrcode {
  -ro-replacedelement: qrcode;
}

.foldlines {
  position: running(foldlinesIdentifier);
}

.foldlines hr {
  position: absolute;
  left: 0;
  margin: 0;
  padding: 0;
  height: 0;
  border: none;
  border-bottom: 0.5pt solid #000;
}

/* Offsets are relative to @left-middle (starts after the 35mm top margin). */
.foldline1 {
  top: calc(105mm - 35mm);
  width: 4mm;
}

.foldline2 {
  top: calc(210mm - 35mm);
  width: 4mm;
}

.foldline3 {
  top: calc(148.5mm - 35mm);
  width: 7mm;
}

.meta-header {
  width: calc(100% + 5mm);
  display: grid;
  grid-template-columns: 85mm minmax(0, 1fr);
  column-gap: 8mm;
  min-height: 45mm;
  margin: var(--meta-header-margin-top, 5mm) 0 0 -5mm;
  align-items: start;
}

.adress-window {
  display: flex;
  flex-direction: column;
  gap: 3.5mm;
  box-sizing: border-box;
  width: 85mm;
  min-height: 45mm;
  max-width: 85mm;
  padding: 5mm 5mm;
  min-width: 0;
}

.adress-window__sender {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-width: 0;
  font-size: var(--text-sm);
}

.descbox {
  font-size: var(--text-md);
  min-width: 0;
  max-width: 75mm;
  margin-top: 5mm;
  justify-self: start;
}

.descbox__grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--space-6);
  row-gap: 0.25mm;
  align-items: baseline;
}

.descbox__table-label {
  white-space: nowrap;
}

.descbox__table-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.adress-window__sender .divider::before {
  content: var(--address-divider, "•");
}

.recipient {
  white-space: pre-line;
  word-wrap: anywhere;
  font-weight: var(--recipient-weight, var(--weight-medium));
}

div.descbox .descbox__grid > :nth-child(1),
div.descbox .descbox__grid > :nth-child(2) {
  font-weight: var(--weight-medium);
}

.document-title {
  margin-top: var(--title-margin-top, var(--space-10));
  font-family: var(--font-heading, var(--font-body));
  font-size: var(--text-title);
  font-weight: var(--heading-weight, var(--weight-regular));
  line-height: var(--heading-leading, var(--leading));
  letter-spacing: var(--heading-tracking, normal);
  text-transform: var(--title-transform, none);
}

.head-text {
  margin-top: var(--space-6);
  max-width: 96%;
  font-size: var(--text-lg);
}

.table {
  width: 100%;
  margin-top: 5mm;
  --posnr-width: 5mm;
  --posnr-gap: 0mm;
  --pos-title-indent: calc(var(--posnr-width) + var(--posnr-gap));
  --col-num: minmax(5em, 0.88fr);
  --table-cols-2: minmax(0, 1fr) var(--col-num);
  --table-cols-3: minmax(0, 2.35fr) minmax(3.5em, 0.78fr) var(--col-num);
  --table-cols-4: minmax(0, 2.75fr) var(--col-num) var(--col-num) var(--col-num);
  --table-cols-5: minmax(0, 2.35fr) minmax(3.5em, 0.78fr) var(--col-num)
    var(--col-num) var(--col-num);
}

.table[data-cols="2"] {
  --table-cols: var(--table-cols-2);
}

.table[data-cols="3"] {
  --table-cols: var(--table-cols-3);
}

.table[data-cols="4"] {
  --table-cols: var(--table-cols-4);
}

.table[data-cols="5"] {
  --table-cols: var(--table-cols-5);
}

.table__row {
  display: grid;
  grid-template-columns: var(--table-cols);
  align-items: start;
  column-gap: var(--space-3);
}

.table__cell {
  min-width: 0;
  padding: 2.5mm 0;
}

.table__tbody .table__cell.right,
.table__tfoot .table__cell.right {
  font-variant-numeric: tabular-nums;
}

.table-header {
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  color: var(--table-header-color, inherit);
  background-color: var(--table-header-bg, transparent);
  text-transform: var(--label-transform, none);
  letter-spacing: var(--label-tracking, normal);
  border-top: var(--table-header-border-top, none);
  border-bottom: var(
    --table-header-border-bottom,
    var(--rule) solid var(--color-rule-strong)
  );
  border-radius: var(--table-header-radius, 0);
  padding: var(--space-1)
    var(--table-header-padding-inline, var(--table-gutter, 0));
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.table-header .table__cell {
  padding-top: 1.5mm;
  padding-bottom: 1.5mm;
}

.table__tbody {
  padding: 0;
}

.table__tbody .table__row.position {
  position: relative;
  border-bottom: none;
  padding-left: var(--table-gutter, 0);
  padding-right: var(--table-gutter, 0);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.table__tbody .table__row.position::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: var(
    --table-position-rule,
    var(--rule-hairline) solid var(--color-rule)
  );
}

.table__tbody .table__row.position:last-child::after {
  display: none;
}

.table__tbody .table__row.position:nth-child(even of .position) {
  background-color: var(--table-row-stripe, transparent);
}

.table__tbody .table__row.position-heading {
  background-color: var(--color-heading-bg);
  padding-left: var(--table-gutter, 0);
  padding-right: var(--table-gutter, 0);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.table__tbody .table__row.position-heading .table__cell--full {
  padding-left: var(--table-heading-indent, var(--pos-title-indent));
  padding-right: var(--table-heading-indent, var(--pos-title-indent));
  border-radius: var(--table-heading-radius, 0);
}

.position .table__cell:first-child > div {
  display: flex;
  gap: var(--posnr-gap);
  align-items: flex-start;
}

.position .table__cell:first-child > div > div {
  min-width: 0;
  flex: 1;
}

.posnr {
  flex: 0 0 var(--posnr-width);
  width: var(--posnr-width);
  box-sizing: border-box;
  font-weight: var(--weight-medium);
  line-height: 1.25;
}

.posnr--optional {
  flex: 0 0 auto;
  width: auto;
  min-width: var(--posnr-width);
  padding-right: 1.5mm;
  line-height: 1.25;
}

.position__title {
  display: block;
  break-after: avoid;
  page-break-after: avoid;
  line-height: 1.25;
  margin-bottom: 0.75mm;
}

.post-text {
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  color: var(--color-muted);
  line-height: 1.25;
  break-before: avoid;
  page-break-before: avoid;
}

.post-text p {
  margin: 0;
  line-height: 1.25;
}

.table__row.table__rule,
.table__row.line {
  align-items: stretch;
}

.table__row.table__rule .table__cell,
.table__row.line .table__cell {
  padding: 0;
  border-top: var(--rule-hairline) solid var(--color-rule);
}

.table__row.table__rule--strong .table__cell,
.table__row.line .table__cell {
  border-top-width: var(--rule);
  border-top-color: var(--color-rule-strong);
}

.table__tfoot .table__row.total {
  position: relative;
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
}

.table__tfoot .table__row--emphasis {
  font-weight: var(--weight-medium);
}

.remaining_amount_net {
  font-weight: var(--weight-medium);
}

.table__tfoot .table__row.total::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border-top: var(--rule-hairline) solid var(--color-rule);
}

.total-gross__value {
  position: relative;
  display: inline-block;
  font-family: var(--total-gross-font, inherit);
  font-size: var(--total-gross-size, inherit);
  font-weight: var(--total-gross-weight, inherit);
  letter-spacing: var(--total-gross-tracking, inherit);
  line-height: var(--total-gross-leading, inherit);
}

.table__cell--full {
  grid-column: 1 / -1;
}

.table__cell--span2 {
  grid-column: span 2;
}

.table__cell--hero {
  padding-top: 4.5mm;
}

.table__tfoot .table__row.vat,
.table__tfoot .table__row.optional-sum {
  break-inside: avoid;
}

.table__tfoot .table__row.total + .table__row.optional-sum .table__cell {
  padding-top: 4.5mm;
}

.table__tfoot .table__row.vat .table__cell--tax-rule {
  padding-top: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  min-width: 0;
}

.table__tfoot .table__row.vat .table__cell--tax-rule__text {
  flex: 1 1 auto;
  min-width: 0;
}

.table__tfoot .table__row.vat .table__cell--tax-rule__amount {
  flex-shrink: 0;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.position .table__cell .discount {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.25;
  white-space: nowrap;
}

.table__stack .table__row:not(:first-child) .table__cell {
  padding-top: 0.5mm;
}

.table__stack .table__row:not(:last-child) .table__cell {
  padding-bottom: 0.5mm;
}

.foot-text {
  margin-top: var(--space-6);
  max-width: var(--foot-text-max-width, 96%);
  font-size: var(--text-lg);
}

.foot-text p {
  margin-top: var(--space-4);
}

.foot-text > p:last-of-type {
  break-inside: avoid;
  page-break-inside: avoid;
}

.foot-text__term {
  display: var(--foot-text-term-display, flex);
  align-items: baseline;
  column-gap: 1.5mm;
  width: var(--foot-text-term-width, auto);
  border: var(--foot-text-term-border, none);
  border-radius: var(--foot-text-term-radius, 0);
  padding: var(--foot-text-term-padding, 0);
  break-inside: avoid;
  page-break-inside: avoid;
}

.foot-text__term + .foot-text__term {
  margin-top: var(--space-2);
}

.foot-text__term-icon {
  display: var(--foot-text-term-icon, inline);
  flex: none;
  width: 1.25em;
  height: 1.25em;
  transform: translateY(0.75mm);
}

.foot-text__term-body {
  min-width: 0;
}

.foot-text__term-label {
  font-weight: var(--weight-medium);
}

@page {
  /* Literal values: custom properties are not applied in the @page context. */
  background-color: #fff;
  background-image:
    linear-gradient(to bottom, transparent 3mm, #fff 3mm),
    linear-gradient(
      to right,
      #0076b9 0 33.333%,
      #e2001a 33.333% 66.667%,
      #fecc00 66.667% 100%
    );
}

    </style>
  <style data-demo-watermark>

html,
body {
  min-height: 297mm;
}
body {
  isolation: isolate;
}
.sevdesk-demo-watermark {
  position: fixed;
  top: 0;
  left: 0;
  width: 210mm;
  height: 297mm;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: -1;
}
.sevdesk-demo-watermark span {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 160pt;
  color: #eee;
  transform: rotate(-45deg);
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

</style>
</head>

  <body>
<div class="sevdesk-demo-watermark" aria-hidden="true"><span>DEMO</span></div>
    
<header class="document-header">
  <div class="document-header__brand">
    {{#parameter.letterpaper_S}} {{#data.is_logo}}
    <div class="header__logo">
      <img
        class="logo"
        alt="{{data.client.name}}"
        src="{{#data.logo_data_url}}{{{data.logo_data_url}}}{{/data.logo_data_url}}{{^data.logo_data_url}}data:image/png;base64,{{data.logo}}{{/data.logo_data_url}}"
      />
    </div>
    {{/data.is_logo}} {{^data.is_logo}}
    <h1 class="header__name">{{data.client.name}}</h1>
    {{/data.is_logo}} {{/parameter.letterpaper_S}}
  </div>
</header>

{{#parameter.qrCode_Y}}
<div class="header__qrcode">
  <a href="{{data.object.qr_url}}" class="qrcode url-qrcode">
    {{#data.object.qr_code_data_url}}
    <img src="{{data.object.qr_code_data_url}}" alt="" />
    {{/data.object.qr_code_data_url}}
  </a>
</div>
{{/parameter.qrCode_Y}}

<footer>
  <div class="footer">
    <div class="footer__section footer__sender">
      <div class="footer__row">{{data.client.name}}</div>
      {{#data.client.name_addition}}
      <div class="footer__row">{{data.client.name_addition}}</div>
      {{/data.client.name_addition}}
      <div class="footer__row">{{data.client.address_street}}</div>
      <div class="footer__row">
        {{data.client.address_zip}} {{data.client.address_city}}
      </div>
      <!-- {{#data.client.address_country}}
      <div class="footer__row">{{data.client.address_country}}</div>
      {{/data.client.address_country}} -->
    </div>

    <div class="footer__section">
      {{#data.client.contact_phone}}
      <div>
        <span class="footer__label">{{# i18n }}Tel{{/ i18n}}</span>
        {{data.client.contact_phone}}
      </div>
      {{/data.client.contact_phone}} {{#data.client.contact_fax}}
      <div class="footer__row">
        <span class="footer__label">{{# i18n }}Fax{{/ i18n}}</span>
        {{data.client.contact_fax}}
      </div>
      {{/data.client.contact_fax}} {{#data.client.contact_email}}
      <div class="footer__row">
        <span class="footer__label">E-Mail</span>
        {{data.client.contact_email}}
      </div>
      {{/data.client.contact_email}} {{#data.client.website}}
      <div class="footer__row">
        <span class="footer__label">{{# i18n }}Web{{/ i18n}}</span>
        {{data.client.website}}
      </div>
      {{/data.client.website}} {{#data.client.tax_number}}
      <div class="footer__row">
        <span class="footer__label">{{# i18n }}Tax-No.{{/ i18n}}</span>
        {{data.client.tax_number}}
      </div>
      {{/data.client.tax_number}}
    </div>

    <div class="footer__section">
      {{#data.client.bank}}
      <div class="footer__row">
        <span class="footer__label">{{# i18n }}Bank{{/ i18n}}</span>
        {{data.client.bank}}
      </div>
      {{/data.client.bank}} {{#data.client.bank_account_number}}
      <div class="footer__row">
        <span class="footer__label">{{# i18n }}Account no.{{/ i18n}}</span>
        {{data.client.bank_account_number}}
      </div>
      {{/data.client.bank_account_number}} {{#data.client.bank_number}}
      <div class="footer__row">
        <span class="footer__label">{{# i18n }}Bank no.{{/ i18n}}</span>
        {{data.client.bank_number}}
      </div>
      {{/data.client.bank_number}} {{#data.client.bank_iban}}
      <div class="footer__row">
        <span class="footer__label">{{# i18n }}IBAN{{/ i18n}}</span>
        {{data.client.bank_iban}}
      </div>
      {{/data.client.bank_iban}} {{#data.client.bank_bic}}
      <div class="footer__row">
        <span class="footer__label">{{# i18n }}BIC{{/ i18n}}</span>
        {{data.client.bank_bic}}
      </div>
      {{/data.client.bank_bic}}
    </div>
    {{#parameter.printPageNumbers_Y}}
    <div class="footer__page-count">
      <div class="page-count">
        <div class="page-count__inner">
          <span class="page"></span
          ><span class="page-count__of">{{# i18n }}PageOf{{/ i18n}}</span
          ><span class="totalPages"></span>
        </div>
      </div>
    </div>
    {{/parameter.printPageNumbers_Y}} {{#parameter.printFooter_Y}}
    {{/parameter.printFooter_Y}}
  </div>
</footer>

{{#parameter.printFoldLines_Y}}
<aside class="foldlines">
  <hr class="foldline1" />
  <hr class="foldline2" />
  <hr class="foldline3" />
</aside>
{{/parameter.printFoldLines_Y}}

<div class="meta-header">
  <div class="adress-window">
    {{#parameter.printDeliveryReturn_Y}}
    <div class="adress-window__sender">
      {{data.client.name}}
      <span class="divider"></span> {{data.client.address_street}}
      <span class="divider"></span> {{data.client.address_zip}}
      {{data.client.address_city}}
    </div>
    {{/parameter.printDeliveryReturn_Y}}
    <div class="recipient">{{data.object.address}}</div>
    {{#data.it}}{{#data.object.vat_number}}
    <div>VAT: {{data.object.vat_number}}</div>
    {{/data.object.vat_number}}{{/data.it}}
  </div>

  <div class="descbox">
    <div class="descbox__grid">
      <span class="descbox__table-label"
        >{{# i18n }}CreditNote Nr.{{/ i18n}}</span
      >
      <span class="descbox__table-value"
        >{{data.object.credit_note_number}}</span
      >

      <span class="descbox__table-label">{{# i18n }}Date{{/ i18n}}</span>
      <span class="descbox__table-value"
        >{{# date }}{{data.object.credit_note_date}}{{/ date }}</span
      >

      {{#data.object.customer_internal_note}}
      <span class="descbox__table-label"
        >{{# i18n }}customer_internal_note{{/ i18n}}</span
      >
      <span class="descbox__table-value"
        >{{data.object.customer_internal_note}}</span
      >
      {{/data.object.customer_internal_note}} {{#data.object.delivery_date}}
      {{#data.object.delivery_date_until}}
      <span class="descbox__table-label"
        >{{# i18n }}DeliverydateUntil{{/ i18n}}</span
      >
      <span class="descbox__table-value"
        >{{# date }}{{data.object.delivery_date}}{{/ date }} - {{# date
        }}{{data.object.delivery_date_until}}{{/ date }}</span
      >
      {{/data.object.delivery_date_until}} {{^data.object.delivery_date_until}}
      <span class="descbox__table-label"
        >{{# i18n }}Deliverydate{{/ i18n}}</span
      >
      <span class="descbox__table-value"
        >{{# date }}{{data.object.delivery_date}}{{/ date }}</span
      >
      {{/data.object.delivery_date_until}} {{/data.object.delivery_date}}
      {{#parameter.printCustomerNumber_Y}}
      <span class="descbox__table-label"
        >{{# i18n }}Your customer no.{{/ i18n}}</span
      >
      <span class="descbox__table-value">{{data.object.customer_number}}</span>
      {{/parameter.printCustomerNumber_Y}} {{#data.object.vat_number}}
      <span class="descbox__table-label">{{# i18n }}Your VAT-ID{{/ i18n}}</span>
      <span class="descbox__table-value">{{data.object.vat_number}}</span>
      {{/data.object.vat_number}} {{#data.object.tax_number}}
      <span class="descbox__table-label">{{# i18n }}Tax-No.{{/ i18n}}</span>
      <span class="descbox__table-value">{{data.object.tax_number}}</span>
      {{/data.object.tax_number}} {{#parameter.printContactPerson_Y}}
      <span class="descbox__table-label"
        >{{# i18n }}Your contact{{/ i18n}}</span
      >
      <span class="descbox__table-value descbox__table-value__contact"
        >{{data.object.contact_person}}</span
      >
      {{/parameter.printContactPerson_Y}}
    </div>
  </div>
</div>

<div class="document-title">{{data.object.header}}</div>

<div class="head-text">{{{data.object.head_text}}}</div>

<div
  class="table"
  role="table"
  data-cols="{{#parameter.printPartNumber_Y}}5{{/parameter.printPartNumber_Y}}{{^parameter.printPartNumber_Y}}4{{/parameter.printPartNumber_Y}}"
>
  <div class="table__thead" role="rowgroup">
    <div class="table__row table-header" role="row">
      <div class="table__cell" role="columnheader">
        {{# i18n }}Description{{/ i18n}}
      </div>
      {{#parameter.printPartNumber_Y}}
      <div class="table__cell" role="columnheader">
        {{# i18n }}Article{{/ i18n}}
      </div>
      {{/parameter.printPartNumber_Y}}
      <div class="table__cell right" role="columnheader">
        {{# i18n }}Quantity{{/ i18n}}
      </div>
      <div class="table__cell right" role="columnheader">
        {{# i18n }}Unit price{{/ i18n}}
      </div>
      <div class="table__cell right" role="columnheader">
        {{# i18n }}Total price{{/ i18n}}
      </div>
    </div>
  </div>
  <div class="table__tbody" role="rowgroup">
    {{#data.object.positions}} {{#pos_nr}}
    <div class="table__row position" role="row">
      <div class="table__cell" role="cell">
        <div>
          <span class="posnr">{{pos_nr}}.</span>
          <div>
            <span class="position__title">{{{name}}}</span>
            <div class="post-text">{{{text}}}</div>
          </div>
        </div>
      </div>

      {{#parameter.printPartNumber_Y}}
      <div class="table__cell" role="cell">{{part_number}}</div>
      {{/parameter.printPartNumber_Y}}

      <div class="table__cell right" role="cell">
        {{^hide_quantity}} {{#numberformat}}{{quantity}}{{/numberformat}}
        {{/hide_quantity}} {{unity_name}}
      </div>

      <div class="table__cell right" role="cell">
        {{#currencyformat}}{{tax_price}}{{/currencyformat}}
      </div>
      <div class="table__cell right" role="cell">
        {{#currencyformat}}{{total}}{{/currencyformat}} {{#discount}}
        <div class="discount">
          {{# i18n }}Discount{{/ i18n}}{{#is_percentage}} {{discount}}%{{/is_percentage}}<br />
          {{#currencyformat}}{{discounted_value}}{{/currencyformat}}
        </div>
        {{/discount}} {{#parameter.printPosTax_Y}}
        <div class="discount">
          ({{# i18n }}Tax{{/ i18n}} {{tax_rate}}%)<br />
        </div>
        {{/parameter.printPosTax_Y}}
      </div>
    </div>
    {{/pos_nr}} {{^pos_nr}}
    <div class="table__row position-heading" role="row">
      <div class="table__cell table__cell--full" role="cell">
        <span class="position__title">{{{name}}}</span>
        <div class="post-text">{{{text}}}</div>
      </div>
    </div>
    {{/pos_nr}} {{/data.object.positions}}
  </div>
  <div class="table__tfoot" role="rowgroup">
    <div class="table__row table__rule table__rule--strong" role="presentation">
  <div class="table__cell table__cell--full"></div>
</div>
    {{#data.object.has_discounts}}
    <div class="table__row discountnet" role="row">
      <div class="table__cell" role="cell">
        {{# i18n }}Sum positions net{{/ i18n}}
      </div>

      {{#parameter.printPartNumber_Y}}
      <div class="table__cell" role="cell"></div>
      {{/parameter.printPartNumber_Y}}
      <div class="table__cell table__cell--span2" role="cell"></div>

      <div class="table__cell right" role="cell">
        {{#currencyformat}}{{data.object.total_withoutdisc_net}}{{/currencyformat}}
      </div>
    </div>

    {{#data.object.discounts}}
    <div class="table__row table__rule" role="presentation">
  <div class="table__cell table__cell--full"></div>
</div>
    <div class="table__row discount" role="row">
      <div class="table__cell" role="cell">{{ text }}</div>

      {{#parameter.printPartNumber_Y}}
      <div class="table__cell" role="cell"></div>
      {{/parameter.printPartNumber_Y}}
      <div class="table__cell" role="cell"></div>

      <div class="table__cell right table__cell--span2" role="cell">
        {{#percentage}} {{value}} %
        ({{#currencyformat}}{{value_relative}}{{/currencyformat}})
        {{/percentage}} {{^percentage}}
        {{#currencyformat}}{{value}}{{/currencyformat}} {{/percentage}}
      </div>
    </div>
    {{/data.object.discounts}} {{/data.object.has_discounts}}
    {{#data.object.has_discounts}}
    <div class="table__row table__rule" role="presentation">
  <div class="table__cell table__cell--full"></div>
</div>
    {{/data.object.has_discounts}}
    <div class="table__row totalnet table__row--emphasis" role="row">
      <div class="table__cell" role="cell">{{# i18n }}Total net{{/ i18n}}</div>

      {{#parameter.printPartNumber_Y}}
      <div class="table__cell" role="cell"></div>
      {{/parameter.printPartNumber_Y}}
      <div class="table__cell table__cell--span2" role="cell"></div>

      <div class="table__cell right" role="cell">
        {{#currencyformat}}{{data.object.total_net}}{{/currencyformat}}
      </div>
    </div>

    {{#tax_type_rule}}
    <div class="table__row vat" role="row">
      <div
        class="table__cell table__cell--full table__cell--tax-rule"
        role="cell"
      >
        <span class="table__cell--tax-rule__text"
          >TAX_TYPE_RULE_DESCRIPTION_PLACEHOLDER</span
        >
        <span class="table__cell--tax-rule__amount"
          >TAX_TYPE_RULE_VALUE_PLACEHOLDER</span
        >
      </div>
    </div>
    {{/tax_type_rule}}

    <div class="table__row total" role="row">
      <div class="table__cell table__cell--hero" role="cell">
        {{# i18n }}Total gross{{/ i18n}}
      </div>

      {{#parameter.printPartNumber_Y}}
      <div class="table__cell table__cell--hero" role="cell"></div>
      {{/parameter.printPartNumber_Y}}
      <div class="table__cell table__cell--hero" role="cell"></div>

      <div
        class="table__cell right table__cell--span2 table__cell--hero"
        role="cell"
      >
        <span class="total-gross__value"
          >{{#currencyformat}}{{data.object.total}}{{/currencyformat}}</span
        >
      </div>
    </div>
  </div>
</div>

{{#data.object.is_final_invoice}}
<h1 class="partialInvoiceCalculation">
  {{# i18n }}PartialInvoiceCalculation{{/ i18n }}
</h1>
<div class="table" role="table" data-cols="4">
  <div class="table__thead" role="rowgroup">
    <div class="table__row table-header" role="row">
      <div class="table__cell" role="columnheader"></div>
      <div class="table__cell right" role="columnheader">
        {{# i18n }}net{{/ i18n}}
      </div>
      <div class="table__cell right" role="columnheader">
        {{# i18n }}vat{{/ i18n}}
      </div>
      <div class="table__cell right" role="columnheader">
        {{# i18n }}gross{{/ i18n}}
      </div>
    </div>
  </div>
  <div class="table__tbody" role="rowgroup">
    <div class="table__row" role="row">
      <div class="table__cell" role="cell">{{data.object.header}}</div>
      <div class="table__cell right" role="cell">
        {{#currencyformat}}{{data.object.total_net}}{{/currencyformat}}
      </div>
      <div class="table__cell right" role="cell">
        {{#currencyformat}}{{data.object.final_invoice_sum_vat}}{{/currencyformat}}
      </div>
      <div class="table__cell right" role="cell">
        {{#currencyformat}}{{data.object.total}}{{/currencyformat}}
      </div>
    </div>
    {{#data.object.partial_invoices}}
    <div class="table__row" role="row">
      <div class="table__cell" role="cell">- {{header}}</div>
      <div class="table__cell right" role="cell">
        {{#currencyformat}}{{net}}{{/currencyformat}}
      </div>
      <div class="table__cell right" role="cell">
        {{#currencyformat}}{{vat}}{{/currencyformat}}
      </div>
      <div class="table__cell right" role="cell">
        {{#currencyformat}}{{gross}}{{/currencyformat}}
      </div>
    </div>
    {{/data.object.partial_invoices}}
    <div class="table__row total" role="row">
      <div class="table__cell table__cell--hero" role="cell">
        {{# i18n }}RemainingAmount{{/ i18n}}
      </div>
      <div class="table__cell right table__cell--hero" role="cell">
        {{#currencyformat}}{{data.object.partial_calc_net}}{{/currencyformat}}
      </div>
      <div class="table__cell right table__cell--hero" role="cell">
        {{#currencyformat}}{{data.object.partial_calc_tax}}{{/currencyformat}}
      </div>
      <div class="table__cell right table__cell--hero" role="cell">
        {{#currencyformat}}{{data.object.partial_calc_gross}}{{/currencyformat}}
      </div>
    </div>
  </div>
</div>
{{/data.object.is_final_invoice}}

<div class="foot-text">{{{data.object.foot_text}}}</div>

{{#parameter.epcQrCode_Y}} {{#data.epc_qr.show}}
<img src="{{data.epc_qr.img_base64}}" class="epcQr" />
{{/data.epc_qr.show}} {{/parameter.epcQrCode_Y}}

{{#data.object.esr.config}} {{#parameter.printSwissPaymentSlip_SHOW_NO_IMG}}
<div class="newPage">
  <div class="paymentSlip-wrapper">
    <div class="paymentSlip-content-v2">
      <div class="paymentSlip-table-parent">
        <div class="paymentSlip-table-wrapper">
          <table class="paymentSlip-table">
            <tr></tr>
            {{#data.object.esr.is_esr}}
            <tr class="paymentSlip-table-row">
              <td>
                <span>&nbsp;</span><br />
                <span>&nbsp;</span><br /><br />
              </td>
              <td>
                <span>&nbsp;</span><br />
                <span>&nbsp;</span><br /><br />
              </td>
            </tr>
            {{/data.object.esr.is_esr}} {{^data.object.esr.is_esr}}
            <tr class="paymentSlip-table-row">
              <td>
                <span>{{data.client.bank}}</span><br />
                <span
                  >{{data.object.esr.address_zip_credit}}
                  {{data.object.esr.address_city_credit}}</span
                ><br /><br />
              </td>
              <td>
                <span>{{data.client.bank}}</span><br />
                <span
                  >{{data.object.esr.address_zip_credit}}
                  {{data.object.esr.address_city_credit}}</span
                ><br /><br />
              </td>
            </tr>
            {{/data.object.esr.is_esr}}
            <tr class="paymentSlip-table-row">
              <td>
                <span>
                  {{data.client.name}}<br />
                  {{data.client.address_street}}<br />
                  {{data.client.address_zip}} {{data.client.address_city}}
                  <br />
                  {{data.client.address_country}}
                </span>
              </td>
              <td>
                <span>
                  {{data.client.name}}<br />
                  {{data.client.address_street}}<br />
                  {{data.client.address_zip}} {{data.client.address_city}}
                  <br />
                  {{data.client.address_country}}
                </span>
              </td>
            </tr>
            <tr class="paymentSlip-table-row">
              <td>
                <span>{{data.object.esr.post_subscriber_number_bank}}</span>
              </td>
              <td>
                <span>{{data.object.esr.post_subscriber_number_bank}}</span>
              </td>
            </tr>
            <tr></tr>
            <tr class="paymentSlip-table-row ocrFont">
              <td class="ocrFont">
                <span>{{data.object.esr.data.sum}}</span>
                <span>{{data.object.esr.data.sumcomma}}</span>
              </td>
              <td class="ocrFont">
                <span>{{data.object.esr.data.sum}}</span>
                <span>{{data.object.esr.data.sumcomma}}</span>
              </td>
            </tr>
            <tr></tr>
            <tr class="paymentSlip-table-row">
              <td>
                <span>{{data.object.esr.data.factura_two}}</span><br /><br />
                <span>{{data.object.address}}</span>
              </td>
            </tr>
          </table>
        </div>
        <div class="paymentSlip-table-wrapper2">
          <table class="paymentSlip-table">
            <tr></tr>
            <tr class="paymentSlip-table-row">
              <td>
                <span>{{data.object.esr.data.factura}}</span>
              </td>
            </tr>
            <tr></tr>
            <tr class="paymentSlip-table-row">
              <td>
                <span>{{data.object.address}}</span>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="ocrFont">
        <div>
          <span>{{data.object.esr.data.bignumber}}</span>
        </div>
      </div>
    </div>
  </div>
</div>
{{/parameter.printSwissPaymentSlip_SHOW_NO_IMG}}
{{^parameter.printSwissPaymentSlip_SHOW_NO_IMG}}
{{#parameter.printSwissPaymentSlip_SHOW_ESR}}
<div class="newPage">
  <div class="paymentSlip-wrapper">
    <div class="paymentSlip-content">
      <div class="paymentSlip-table-parent">
        <div class="paymentSlip-table-wrapper">
          <table class="paymentSlip-table">
            <tr></tr>
            {{#data.object.esr.is_esr}}
            <tr class="paymentSlip-table-row">
              <td>
                <span>&nbsp;</span><br />
                <span>&nbsp;</span><br /><br />
              </td>
              <td>
                <span>&nbsp;</span><br />
                <span>&nbsp;</span><br /><br />
              </td>
            </tr>
            {{/data.object.esr.is_esr}} {{^data.object.esr.is_esr}}
            <tr class="paymentSlip-table-row">
              <td>
                <span>{{data.client.bank}}</span><br />
                <span
                  >{{data.object.esr.address_zip_credit}}
                  {{data.object.esr.address_city_credit}}</span
                ><br /><br />
              </td>
              <td>
                <span>{{data.client.bank}}</span><br />
                <span
                  >{{data.object.esr.address_zip_credit}}
                  {{data.object.esr.address_city_credit}}</span
                ><br /><br />
              </td>
            </tr>
            {{/data.object.esr.is_esr}}
            <tr class="paymentSlip-table-row">
              <td>
                <span>
                  {{data.client.name}}<br />
                  {{data.client.address_street}}<br />
                  {{data.client.address_zip}} {{data.client.address_city}}
                  <br />
                  {{data.client.address_country}}
                </span>
              </td>
              <td>
                <span>
                  {{data.client.name}}<br />
                  {{data.client.address_street}}<br />
                  {{data.client.address_zip}} {{data.client.address_city}}
                  <br />
                  {{data.client.address_country}}
                </span>
              </td>
            </tr>
            <tr class="paymentSlip-table-row">
              <td>
                <span>{{data.object.esr.post_subscriber_number_bank}}</span>
              </td>
              <td>
                <span>{{data.object.esr.post_subscriber_number_bank}}</span>
              </td>
            </tr>
            <tr></tr>
            <tr class="paymentSlip-table-row ocrFont">
              <td class="ocrFont">
                <span>{{data.object.esr.data.sum}}</span>
                <span>{{data.object.esr.data.sumcomma}}</span>
              </td>
              <td class="ocrFont">
                <span>{{data.object.esr.data.sum}}</span>
                <span>{{data.object.esr.data.sumcomma}}</span>
              </td>
            </tr>
            <tr></tr>
            <tr class="paymentSlip-table-row">
              <td>
                <span>{{data.object.esr.data.factura_two}}</span><br /><br />
                <span>{{data.object.address}}</span>
              </td>
            </tr>
          </table>
        </div>
        <div class="paymentSlip-table-wrapper2">
          <table class="paymentSlip-table">
            <tr></tr>
            <tr class="paymentSlip-table-row">
              <td>
                <span>{{data.object.esr.data.factura}}</span>
              </td>
            </tr>
            <tr></tr>
            <tr class="paymentSlip-table-row">
              <td>
                <span>{{data.object.address}}</span>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="ocrFont">
        <span>{{data.object.esr.data.bignumber}}</span>
      </div>
    </div>
  </div>
</div>

{{/parameter.printSwissPaymentSlip_SHOW_ESR}}
{{/parameter.printSwissPaymentSlip_SHOW_NO_IMG}} {{/data.object.esr.config}}

  </body>
</html>
