Betriebskostenabrechnung (utility cost statement)

{#- Betriebskostenabrechnung (annual utility cost statement) for one flat. Each cost type names an allocation key;
    the tenant's share is total × own units ÷ total units, rounded to the cent, and the heating costs come from the
    metering service's own statement. The balance against the prepayments decides between "Nachzahlung" (to pay)
    and "Guthaben" (to refund). Sample wording only, not legal advice. -#}
{%- set loc = "de-DE" -%}
{%- set ns = namespace(operating=0.0, service=0.0, craft=0.0, amounts=[]) -%}
{%- for cost in costs -%}
  {%- set key = allocation_keys | selectattr("id", "equalto", cost.key) | first -%}
  {%- set amount = (cost.total * key.share / key.total) | round(2) -%}
  {%- set ns.amounts = ns.amounts + [amount] -%}
  {%- set ns.operating = ns.operating + amount -%}
  {%- if cost.tax_35a == "service" -%}{%- set ns.service = ns.service + amount -%}{%- endif -%}
  {%- if cost.tax_35a == "craft" -%}{%- set ns.craft = ns.craft + amount -%}{%- endif -%}
{%- endfor -%}
{%- set operating = ns.operating | round(2) -%}
{%- set heating_amount = heating.amount if heating else 0 -%}
{%- set total = (operating + heating_amount) | round(2) -%}
{%- set prepaid = (statement.monthly_prepayment * statement.months_paid) | round(2) -%}
{%- set balance = (total - prepaid) | round(2) -%}
{%- set due_date = statement.date | date_add(days=statement.payment_days) -%}
{%- set house_total = costs | sum_by("total") -%}

{%- macro money(value) -%}{{ value | format_currency("EUR", loc) }}{%- endmacro -%}
{%- macro day(value) -%}{{ value | format_date("%d.%m.%Y", loc) }}{%- endmacro -%}
{%- macro units(value, key) -%}{{ value | format_number(loc, key.decimals) }} {{ key.unit }}{%- endmacro -%}
{%- macro addressee(tenant) -%}
  {%- if tenant.salutation == "Herr" -%}Herrn {% elif tenant.salutation == "Frau" -%}Frau {% endif -%}{{ tenant.first_name }} {{ tenant.last_name }}
{%- endmacro -%}
{%- macro greeting(tenant, first) -%}
  {%- set opening = "Sehr" if first else "sehr" -%}
  {%- if tenant.salutation == "Herr" -%}{{ opening }} geehrter Herr {{ tenant.last_name }}
  {%- elif tenant.salutation == "Frau" -%}{{ opening }} geehrte Frau {{ tenant.last_name }}
  {%- else -%}{{ "Guten Tag" if first else "guten Tag" }} {{ tenant.first_name }} {{ tenant.last_name }}{%- endif -%}
{%- endmacro -%}

<header class="letterhead">
  <div class="brand">
    <svg viewBox="0 0 48 48" aria-hidden="true">
      <rect x="2" y="2" width="44" height="44" rx="10" fill="#2c5f4f"/>
      <path d="M11 24.5L24 13l13 11.5" fill="none" stroke="#ffffff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M15.5 22.5V35h17V22.5" fill="none" stroke="#ffffff" stroke-width="3.4" stroke-linejoin="round"/>
      <rect x="21.2" y="27" width="5.6" height="8" rx="1" fill="#a8d5c2"/>
    </svg>
    <div>
      <div class="brand-name">{{ manager.short_name }}</div>
      <div class="brand-sub">Miet- und WEG-Verwaltung</div>
    </div>
  </div>
  <div class="sender-block">
    {{ manager.name }}<br>
    {{ manager.street }} · {{ manager.postcode }} {{ manager.city }}<br>
    {{ manager.phone }} · {{ manager.email }}
  </div>
</header>

<section class="addressing">
  <div class="window">
    <p class="return-line">{{ manager.name }} · {{ manager.street }} · {{ manager.postcode }} {{ manager.city }}</p>
    <div class="recipient">
      {% for tenant in tenancy.tenants %}<p>{{ addressee(tenant) }}</p>{% endfor %}
      <p>{{ tenancy.street }}</p>
      <p>{{ tenancy.postcode }} {{ tenancy.city }}</p>
    </div>
  </div>
  <table class="refs">
    <tr><th scope="row">Datum</th><td>{{ day(statement.date) }}</td></tr>
    <tr><th scope="row">Mieternummer</th><td>{{ tenancy.tenant_number }}</td></tr>
    <tr><th scope="row">Objekt</th><td>{{ property.reference }}</td></tr>
    <tr><th scope="row">Ansprechpartnerin</th><td>{{ contact.name }}</td></tr>
    <tr><th scope="row">Telefon</th><td>{{ contact.phone }}</td></tr>
    <tr><th scope="row">E-Mail</th><td>{{ contact.email }}</td></tr>
  </table>
</section>

<h1 class="subject">Betriebskostenabrechnung für den Zeitraum {{ day(statement.period_start) }} bis {{ day(statement.period_end) }}</h1>

<p class="salutation">{% for tenant in tenancy.tenants %}{{ greeting(tenant, loop.first) }},{% if not loop.last %} {% endif %}{% endfor %}</p>
<p class="intro">
  anbei erhalten Sie die Abrechnung der Betriebskosten für Ihre Wohnung {{ tenancy.unit }} im Auftrag der
  {{ landlord }}. Abgerechnet werden die im Mietvertrag vereinbarten Betriebskosten mit den tatsächlichen Kosten des
  Abrechnungszeitraums. Die Heiz- und Warmwasserkosten wurden vom Messdienst nach Verbrauch ermittelt; dessen
  Einzelabrechnung liegt diesem Schreiben bei.
</p>

<div class="result{{ ' due' if balance > 0 else '' }}">
  <div>
    <p class="result-label">{% if balance > 0 %}Ihre Nachzahlung{% elif balance < 0 %}Ihr Guthaben{% else %}Ergebnis{% endif %}</p>
    <p class="result-text">
      {% if balance > 0 %}Bitte überweisen Sie den Betrag bis zum <strong>{{ day(due_date) }}</strong> unter Angabe Ihrer Mieternummer {{ tenancy.tenant_number }}.
      {% elif balance < 0 %}Wir überweisen Ihnen den Betrag bis zum <strong>{{ day(due_date) }}</strong> auf das uns bekannte Konto.
      {% else %}Ihre Vorauszahlungen decken die Kosten genau; es ist nichts zu zahlen.{% endif %}
    </p>
  </div>
  <p class="result-amount">{{ money(balance | abs) }}</p>
</div>

<section class="keys">
  <h2 class="section-title"><span>1</span>Verteilerschlüssel</h2>
  <div class="key-cards">
    {% for key in allocation_keys %}
    <div class="key-card">
      <p class="key-label">{{ key.label }}</p>
      <p class="key-value">{{ units(key.share, key) }}</p>
      <p class="key-total">von {{ units(key.total, key) }} · {{ (key.share / key.total) | format_percent(loc, 3) }}</p>
    </div>
    {% endfor %}
  </div>
  <p class="table-note">Wirtschaftseinheit {{ property.address }} mit {{ property.units }} Wohnungen. Nutzungszeitraum: der gesamte Abrechnungszeitraum.</p>
</section>

<section class="costs">
  <h2 class="section-title"><span>2</span>Kostenaufstellung</h2>
  <table class="grid">
    <thead>
      <tr>
        <th scope="col">Kostenart</th>
        <th class="num" scope="col">Gesamtkosten</th>
        <th scope="col">Verteilung</th>
        <th class="num" scope="col">Ihre Kosten</th>
      </tr>
    </thead>
    <tbody>
      {% for cost in costs %}
      {%- set key = allocation_keys | selectattr("id", "equalto", cost.key) | first %}
      <tr>
        <td>{{ cost.name }}{% if cost.tax_35a %} <span class="marker">*</span>{% endif %}</td>
        <td class="num">{{ money(cost.total) }}</td>
        <td><span class="key-tag">{{ key.label }}</span> <span class="share">{{ key.share | format_number(loc, key.decimals) }} / {{ units(key.total, key) }}</span></td>
        <td class="num">{{ money(ns.amounts[loop.index0]) }}</td>
      </tr>
      {% endfor %}
      {% if heating %}
      <tr>
        <td>{{ heating.label }}</td>
        <td class="num">–</td>
        <td><span class="key-tag">Verbrauch</span> <span class="share">{{ heating.note }}</span></td>
        <td class="num">{{ money(heating_amount) }}</td>
      </tr>
      {% endif %}
    </tbody>
    <tfoot>
      <tr>
        <th scope="row">Summe</th>
        <td class="num">{{ money(house_total) }}</td>
        <td class="blank"></td>
        <td class="num">{{ money(total) }}</td>
      </tr>
    </tfoot>
  </table>
  <p class="table-note">{% if heating %}Gesamtkosten der Wirtschaftseinheit ohne Heizkosten.{% endif %}{% if ns.service > 0 or ns.craft > 0 %} <span class="marker">*</span> Enthält Aufwendungen, die nach § 35a EStG steuerlich begünstigt sein können (siehe Hinweise).{% endif %}</p>
</section>

<section class="result-section">
  <h2 class="section-title"><span>3</span>Ergebnis</h2>
  <div class="summary">
    <div class="pay-box">
      {% if balance > 0 %}
      <p class="box-title">Zahlungsempfänger</p>
      <dl>
        <dt>Empfänger</dt><dd>{{ manager.name }}</dd>
        <dt>IBAN</dt><dd>{{ manager.iban }}</dd>
        <dt>BIC</dt><dd>{{ manager.bic }}</dd>
        <dt>Betrag</dt><dd>{{ money(balance) }}</dd>
        <dt>Zahlbar bis</dt><dd>{{ day(due_date) }}</dd>
        <dt>Verwendungszweck</dt><dd>BKA {{ statement.period_end | format_date("%Y", loc) }} {{ tenancy.tenant_number }}</dd>
      </dl>
      {% else %}
      <p class="box-title">Erstattung</p>
      <dl>
        <dt>Betrag</dt><dd>{{ money(balance | abs) }}</dd>
        <dt>Überweisung bis</dt><dd>{{ day(due_date) }}</dd>
        <dt>Konto</dt><dd>das uns bekannte Konto</dd>
      </dl>
      {% endif %}
    </div>
    <table class="totals">
      <tr><th scope="row">Betriebskosten</th><td class="num">{{ money(operating) }}</td></tr>
      {% if heating %}<tr><th scope="row">{{ heating.label }}</th><td class="num">{{ money(heating_amount) }}</td></tr>{% endif %}
      <tr class="grand"><th scope="row">Ihre Kosten gesamt</th><td class="num">{{ money(total) }}</td></tr>
      <tr><th scope="row">abzgl. Vorauszahlungen ({{ statement.months_paid }} × {{ money(statement.monthly_prepayment) }})</th><td class="num">−{{ money(prepaid) }}</td></tr>
      <tr class="balance{{ ' due' if balance > 0 else '' }}"><th scope="row">{% if balance > 0 %}Nachzahlung{% elif balance < 0 %}Guthaben{% else %}Ausgeglichen{% endif %}</th><td class="num">{{ money(balance | abs) }}</td></tr>
    </table>
  </div>
</section>

{% if statement.new_monthly_prepayment and statement.new_monthly_prepayment != statement.monthly_prepayment %}
<section class="prepayment-section">
  <h2 class="section-title"><span>4</span>Anpassung der Vorauszahlungen</h2>
  <div class="prepayment">
    <div class="change">
      <p class="old">{{ money(statement.monthly_prepayment) }}</p>
      <p class="new">{{ money(statement.new_monthly_prepayment) }}</p>
    </div>
    <p>
      Auf Grundlage dieser Abrechnung passen wir Ihre monatliche Vorauszahlung auf die Betriebs- und Heizkosten an.
      Ab dem <strong>{{ day(statement.new_prepayment_from) }}</strong> beträgt sie {{ money(statement.new_monthly_prepayment) }}
      statt bisher {{ money(statement.monthly_prepayment) }}. Bitte passen Sie einen Dauerauftrag entsprechend an.
    </p>
  </div>
</section>
{% endif %}

<section class="hints">
  <h2 class="section-title"><span>{{ 5 if (statement.new_monthly_prepayment and statement.new_monthly_prepayment != statement.monthly_prepayment) else 4 }}</span>Hinweise</h2>
  <ul class="notes">
    <li><strong>Belegeinsicht:</strong> Die Rechnungen und Verträge zu dieser Abrechnung können Sie nach Terminvereinbarung zu unseren Bürozeiten ({{ manager.office_hours }}) einsehen.</li>
    <li><strong>Einwendungen</strong> gegen diese Abrechnung teilen Sie uns bitte spätestens bis zum Ablauf des zwölften Monats nach Zugang schriftlich mit.</li>
    {% if ns.service > 0 or ns.craft > 0 %}
    <li><strong>Steuerermäßigung (§ 35a EStG):</strong> Von Ihren Kosten entfallen {{ money(ns.service | round(2)) }} auf haushaltsnahe Dienstleistungen und {{ money(ns.craft | round(2)) }} auf Handwerkerleistungen. Eine Bescheinigung für Ihre Steuererklärung senden wir Ihnen auf Anfrage zu.</li>
    {% endif %}
  </ul>
</section>

<section class="closing">
  <p>Bei Fragen zu dieser Abrechnung erreichen Sie uns unter {{ contact.phone }}.</p>
  <p class="greeting">Mit freundlichen Grüßen</p>
  <p class="company">{{ manager.name }}</p>
  <p class="signer">i. A. {{ contact.name }}</p>
  <p class="machine">Dieses Schreiben wurde maschinell erstellt und ist ohne Unterschrift gültig.</p>
  {% if heating %}<p class="enclosures"><strong>Anlage:</strong> Heiz- und Warmwasserkostenabrechnung des Messdienstes</p>{% endif %}
</section>

<title>Betriebskostenabrechnung {{ statement.period_start | format_date("%d.%m.%Y", "de-DE") }} bis {{ statement.period_end | format_date("%d.%m.%Y", "de-DE") }} – {{ tenancy.unit }}</title>
<style>
  :root {
    --ink: #1b2622;
    --muted: #5f6b66;
    --rule: #d5ddd9;
    --soft: #eef3f0;
    --accent: #2c5f4f;
    --accent-soft: #dfeae5;
    --due: #9a3b1b;
    --due-soft: #fbece4;
  }
  * { box-sizing: border-box; }
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body {
    margin: 0;
    color: var(--ink);
    font-family: "Source Sans 3", "Liberation Sans", Arial, sans-serif;
    font-size: 9.5pt;
    line-height: 1.45;
  }
  p { margin: 0; }
  h1, h2 { margin: 0; }
  .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .muted { color: var(--muted); }

  /* Letterhead */
  .letterhead { display: flex; justify-content: space-between; align-items: flex-start; }
  .brand { display: flex; align-items: center; gap: 3mm; }
  .brand svg { width: 12mm; height: 12mm; }
  .brand-name { font-size: 13pt; font-weight: 700; letter-spacing: -0.01em; color: var(--accent); }
  .brand-sub { font-size: 8pt; color: var(--muted); }
  .sender-block { text-align: right; font-size: 8pt; line-height: 1.5; color: var(--muted); }

  /* Address field and reference block (DIN 5008 style) */
  .addressing { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 12mm; }
  .window { width: 85mm; min-height: 36mm; }
  .return-line { display: inline-block; margin-bottom: 2.5mm; padding-bottom: 0.6mm; border-bottom: 0.2mm solid var(--rule); font-size: 6.5pt; color: var(--muted); }
  .recipient p { font-size: 10pt; line-height: 1.4; }
  .refs { width: 70mm; border-collapse: collapse; font-size: 8.5pt; }
  .refs td, .refs th { padding: 0.45mm 0; vertical-align: top; }
  .refs th { color: var(--muted); padding-right: 3mm; white-space: nowrap; font-weight: inherit; text-align: inherit; }
  .refs td:last-child { text-align: right; }

  .subject { margin: 6mm 0 4mm; font-size: 12pt; font-weight: 700; line-height: 1.3; }
  .salutation { margin-bottom: 2.5mm; }
  .intro { margin-bottom: 5mm; }

  /* Result */
  .result { display: grid; grid-template-columns: 1fr auto; gap: 6mm; align-items: center; margin-bottom: 6mm; padding: 4.5mm 5mm; border-radius: 2mm; background: var(--accent-soft); break-inside: avoid; page-break-inside: avoid; }
  .result.due { background: var(--due-soft); }
  .result-label { font-size: 7.5pt; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
  .result.due .result-label { color: var(--due); }
  .result-text { margin-top: 1mm; font-size: 9pt; }
  .result-amount { font-size: 20pt; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; }
  .result.due .result-amount { color: var(--due); }

  /* Sections */
  .section-title { margin: 0 0 2.5mm; font-size: 10.5pt; font-weight: 700; color: var(--accent); break-after: avoid; page-break-after: avoid; }
  .section-title span { display: inline-block; width: 6mm; color: var(--muted); font-weight: 600; }
  section { margin-bottom: 5mm; }

  table.grid { width: 100%; border-collapse: collapse; }
  table.grid thead { display: table-header-group; }
  table.grid tfoot { display: table-row-group; }
  table.grid thead th {
    padding: 1.8mm 2mm; border-bottom: 0.35mm solid var(--ink); text-align: left; vertical-align: bottom;
    font-size: 7pt; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
  }
  table.grid thead th.num { text-align: right; }
  table.grid td, table.grid tfoot th { padding: 1.45mm 2mm; border-bottom: 0.2mm solid var(--rule); vertical-align: top; }
  table.grid tr { break-inside: avoid; page-break-inside: avoid; }
  table.grid tfoot td, table.grid tfoot th { border-top: 0.35mm solid var(--ink); border-bottom: none; font-weight: 700; }
  table.grid tfoot th { text-align: left; }
  /* Empty cells paint white inside their padding, so the tagged PDF keeps them in the table structure (PDF/UA)
     without painting over the row edges. */
  table.grid .blank { background: #ffffff content-box; }
  .key-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; }
  .key-card { padding: 2.6mm 3mm; border: 0.3mm solid var(--rule); border-top: 0.8mm solid var(--accent); border-radius: 1.2mm; break-inside: avoid; page-break-inside: avoid; }
  .key-label { font-size: 7pt; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .key-value { margin-top: 0.8mm; font-size: 12pt; font-weight: 700; font-variant-numeric: tabular-nums; }
  .key-total { font-size: 7.5pt; color: var(--muted); font-variant-numeric: tabular-nums; }
  .key-tag { display: inline-block; padding: 0 1.6mm; border-radius: 1mm; background: var(--soft); font-size: 7.5pt; color: var(--muted); white-space: nowrap; }
  .share { margin-left: 1.5mm; font-size: 8pt; color: var(--muted); white-space: nowrap; }
  .marker { color: var(--accent); font-weight: 700; }
  .table-note { margin-top: 1.8mm; font-size: 7.5pt; color: var(--muted); }

  /* Summary */
  .summary { display: grid; grid-template-columns: 1fr 82mm; gap: 8mm; align-items: start; break-inside: avoid; page-break-inside: avoid; }
  .totals { width: 100%; border-collapse: collapse; }
  .totals td, .totals th { padding: 1.25mm 2mm; }
  .totals th { font-weight: inherit; text-align: inherit; }
  .totals .sub td, .totals .sub th { border-top: 0.2mm solid var(--rule); }
  .totals .grand td, .totals .grand th { border-top: 0.4mm solid var(--ink); font-weight: 700; }
  .totals .balance td, .totals .balance th { background: var(--accent-soft); color: var(--accent); font-size: 11pt; font-weight: 700; }
  .totals .balance.due td, .totals .balance.due th { background: var(--due-soft); color: var(--due); }
  .pay-box { padding: 3.5mm 4mm; border: 0.3mm solid var(--rule); border-radius: 2mm; font-size: 8.5pt; }
  .pay-box dl { display: grid; grid-template-columns: auto 1fr; gap: 0.6mm 4mm; margin: 1.5mm 0 0; }
  .pay-box dt { color: var(--muted); }
  .pay-box dd { margin: 0; font-variant-numeric: tabular-nums; }
  .box-title { font-size: 7.5pt; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

  .prepayment { display: flex; gap: 6mm; align-items: center; padding: 3.5mm 4.5mm; border-left: 1mm solid var(--accent); background: var(--soft); break-inside: avoid; page-break-inside: avoid; }
  .prepayment .change { flex: none; text-align: center; font-variant-numeric: tabular-nums; }
  .prepayment .old { font-size: 8.5pt; color: var(--muted); text-decoration: line-through; }
  .prepayment .new { font-size: 14pt; font-weight: 700; color: var(--accent); }

  .notes { margin: 0; padding: 0; list-style: none; }
  .notes li { position: relative; margin-bottom: 1.5mm; padding-left: 5mm; break-inside: avoid; page-break-inside: avoid; }
  .notes li::before { content: ""; position: absolute; left: 0; top: 1.7mm; width: 2mm; height: 2mm; border-radius: 50%; background: var(--accent); }
  .notes strong { font-weight: 700; }

  .closing { break-inside: avoid; page-break-inside: avoid; }
  .closing .greeting { margin-top: 4mm; }
  .closing .company { margin-top: 1mm; font-weight: 700; }
  .closing .signer { margin-top: 6mm; }
  .closing .machine { margin-top: 2.5mm; font-size: 7.5pt; color: var(--muted); }
  .enclosures { margin-top: 3mm; font-size: 8.5pt; }
</style>

{
  "header": {
    "enabled": false
  },
  "footer": {
    "enabled": true,
    "html": "<div style=\"box-sizing:border-box;width:100%;padding-bottom:7mm;font-family:'Source Sans 3','Liberation Sans',Arial,sans-serif;font-size:6.8pt;line-height:1.4;color:#5f6b66\"><div style=\"display:flex;justify-content:space-between;gap:5mm;padding-top:2mm;border-top:0.2mm solid #d5ddd9\"><span>{{ manager.name }} · {{ manager.street }} · {{ manager.postcode }} {{ manager.city }}<br>Geschäftsführer: {{ manager.managing_director }} · {{ manager.register }}</span><span>IBAN {{ manager.iban }} · BIC {{ manager.bic }}<br>USt-IdNr. {{ manager.vat_id }} · {{ manager.website }}</span><span style=\"white-space:nowrap;text-align:right\">Mieternr. {{ tenancy.tenant_number }}<br>Seite <span class=\"page\"></span> von <span class=\"pages\"></span></span></div></div>",
    "height": "17mm"
  }
}