{% extends "_base.html" %}
{% import "_recipient.html" as r %}

{% block styles %}
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-doc-text);
}

/* Page header — letterhead band */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 0;
  margin-bottom: 0;
}

.logo-group {}

.logo {
  font-family: var(--font-headline);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-black);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.logo span {
  color: var(--color-terracotta);
}

.header-tagline {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-subtle);
  margin-top: 3px;
}

.header-contact {
  text-align: right;
  font-size: 10px;
  color: var(--color-body);
  line-height: 1.55;
}
.header-contact strong {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 11px;
  color: var(--color-black);
}

.accent-bar {
  height: 2px;
  background: var(--color-terracotta);
  margin-top: 14px;
  margin-bottom: 28px;
}

/* Sender block — hidden, info lives in .header-contact now */
.sender-block { display: none; }

/* Meta strip */
.meta-strip {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 0.5px solid var(--color-doc-border);
}
.meta-to {
  font-size: 12px;
  color: var(--color-body);
  line-height: 1.6;
}
.meta-to strong {
  font-family: var(--font-headline);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-black);
  display: block;
  margin-bottom: 1px;
}
.meta-right {
  text-align: right;
  font-size: 12px;
  color: var(--color-doc-text);
  font-weight: 500;
  line-height: 1.7;
  padding-top: 2px;
}
.meta-right .ref {
  font-size: 11px;
  color: var(--color-subtle);
  font-weight: 400;
  display: block;
}

.confidential-label {
  color: var(--color-terracotta);
  font-weight: 600;
}

/* Subject line */
.subject-line {
  border-left: 3px solid var(--color-terracotta);
  padding-left: 16px;
  margin-bottom: 24px;
}
.subject-label { display: none; }
.subject-text {
  font-family: var(--font-headline);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-black);
  line-height: 1.3;
}

/* Offer block / blockquote */
.body-content .offer-block,
.body-content blockquote {
  border-left: 3px solid var(--color-terracotta);
  padding: 12px 16px;
  margin: 16px 0;
  background: var(--color-cream);
  border-radius: 0 6px 6px 0;
}
.body-content blockquote {
  color: var(--color-subtle);
  font-style: italic;
  background: transparent;
}

/* Body content (markdown) */
.body-content p { margin-bottom: 12px; }
.body-content strong { font-weight: 600; color: var(--color-black); }
.body-content a { color: var(--color-terracotta); text-decoration: none; }

/* Headings */
.body-content h1 {
  font-family: var(--font-headline);
  font-weight: 700; font-size: 22px; color: var(--color-black);
  margin-top: 28px; margin-bottom: 12px; line-height: 1.25;
}
.body-content h2 {
  font-family: var(--font-headline);
  font-weight: 700; font-size: 15px; color: var(--color-black);
  margin-top: 28px; margin-bottom: 10px;
  line-height: 1.3; letter-spacing: -0.01em;
}
.body-content h3 {
  font-family: var(--font-headline);
  font-weight: 600; font-size: 14px; color: var(--color-black);
  margin-top: 20px; margin-bottom: 8px; line-height: 1.35;
}

/* Lists */
.body-content ul, .body-content ol { margin-bottom: 12px; padding-left: 24px; }
.body-content li { margin-bottom: 4px; }

/* HR */
.body-content hr { border: none; margin: 20px 0; }

/* Code */
.body-content code { font-family: 'Courier New', monospace; font-size: 11px; background: var(--color-light); padding: 1px 4px; border-radius: 3px; }
.body-content pre { background: var(--color-light); padding: 14px; border-radius: 6px; overflow-x: auto; margin-bottom: 12px; }
.body-content pre code { background: none; padding: 0; }

/* Tables — contained commercial block */
.body-content table {
  width: 100%; border-collapse: collapse;
  margin: 4px 0 16px 0; font-size: 12.5px;
  background: var(--color-cream); border-left: 3px solid var(--color-terracotta);
  border-radius: 0 4px 4px 0;
}
.body-content thead th { padding: 0; border: none; height: 0; line-height: 0; font-size: 0; }
.body-content td { padding: 10px 14px; border-bottom: 1px solid var(--color-light); vertical-align: top; }
.body-content tbody tr:last-child td { border-bottom: none; }
.body-content td:first-child { width: 110px; font-family: var(--font-ui); font-weight: 600; color: var(--color-black); white-space: nowrap; }
.body-content tbody tr:first-child td { padding-top: 14px; padding-bottom: 14px; }
.body-content tbody tr:first-child td:last-child { font-size: 13px; font-weight: 600; color: var(--color-black); font-family: var(--font-headline); }

h1, h2, h3 { break-after: avoid; }

/* Legal notes — acceptance + AGB grouped tight under body */
.legal-notes {
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  border-top: 0.5px solid var(--color-doc-border);
  font-size: 10.5px;
  color: var(--color-subtle);
  line-height: 1.55;
}
.legal-notes p { margin-bottom: 4px; }
.legal-notes p:last-child { margin-bottom: 0; }

/* About block — last in flow, slightly smaller */
.about-block {
  margin-top: 1.25rem;
  font-size: 10px;
  color: var(--color-subtle);
  line-height: 1.5;
  font-style: italic;
}

/* Signature */
.signature-block {
  margin-top: 1.5rem;
  font-size: 13px;
  color: var(--color-doc-text);
  line-height: 1.6;
  break-inside: avoid;
  page-break-inside: avoid;
}
.signature-block .closing { margin-bottom: 0.5rem; }
.signature-block .name { font-weight: 600; color: var(--color-black); }

.uid-line, .private-label { font-size: 11px; color: var(--color-body); }
{% endblock %}

{% block content %}
<div class="page-header">
  <div class="logo-group">
    <div class="logo">Escape <span>Velocity</span></div>
    <div class="header-tagline">{{ STRINGS.tagline }}</div>
  </div>
  <div class="header-contact">
    <strong>Thomas Enenkel GmbH</strong><br>
    Wiener Straße 11-13/2/3 · 3002 Purkersdorf<br>
    +43 660 6522083 · tommi.enenkel@escapevelocity.consulting
  </div>
</div>
<div class="accent-bar"></div>

<!-- Hidden — sender info now in .header-contact -->
<div class="sender-block">
  <div class="sender-company">Thomas Enenkel GmbH</div>
  <div class="sender-address">Wiener Straße 11-13/2/3<br>3002 Purkersdorf</div>
  <div class="sender-registration">UID: ATU77669024<br>IBAN: AT03 3266 7000 0003 8695</div>
  <div class="sender-contact">+43 660 6522083<br>tommi.enenkel@escapevelocity.consulting</div>
</div>

{% if SHOW_META %}
<div class="meta-strip">
  <div class="meta-to">
    {% if HAS_RECIPIENT %}{{ r.block(RECIPIENT_OBJ, STRINGS) }}{% endif %}
  </div>
  <div class="meta-right">
    {{ DATE }}{% if REF %}<span class="ref">Ref: {{ REF }}</span>{% endif %}
    {% if CONFIDENTIAL %}<br><span class="confidential-label">{{ STRINGS.confidential_label }}</span>{% endif %}
  </div>
</div>
{% endif %}

{% if SUBJECT %}
<div class="subject-line">
  <div class="subject-label">{{ STRINGS.subject_label }}</div>
  <div class="subject-text">{{ SUBJECT }}</div>
</div>
{% endif %}

<div class="body-content">
{{ CONTENT | safe }}
</div>

{% if SHOW_SIGNATURE %}
<div class="signature-block">
  <div class="closing">{{ STRINGS.signature_closing }}</div>
  <div class="name">{{ STRINGS.signature_name }}</div>
  <div class="org">{{ STRINGS.signature_org }}</div>
</div>
{% endif %}

<div class="legal-notes">
  {% if LANG == 'en' %}
  <p>This offer is deemed accepted upon written confirmation or receipt of the first partial payment. The General Terms and Conditions (AGB) of Thomas Enenkel GmbH, provided together with this offer, apply and become part of the contract upon acceptance.</p>
  {% else %}
  <p>Dieses Angebot gilt als angenommen bei schriftlicher Bestätigung oder Eingang der ersten Teilzahlung. Es gelten die Allgemeinen Geschäftsbedingungen (AGB) der Thomas Enenkel GmbH, die diesem Angebot beiliegen und mit Annahme Vertragsbestandteil werden.</p>
  {% endif %}
</div>

{% if SHOW_ABOUT %}
<div class="about-block">
  {% if LANG == 'en' %}
  Escape Velocity Consulting helps Austrian companies with digitization, automation and the introduction of AI.<br><br>
  Behind Escape Velocity is Tommi Enenkel. 17 years in digitization, including as CIO at NEOS, responsible for 2,500 users and the entire systems landscape. Independent in Vienna since early 2026.
  {% else %}
  Escape Velocity Consulting unterstützt österreichische Unternehmen bei Digitalisierung, Automatisierung und KI-Einführungen.<br><br>
  Hinter Escape Velocity steht Tommi Enenkel. Seit 17 Jahren in der Digitalisierung tätig, u.a. als CIO bei NEOS für 2.500 User und die gesamte Systemlandschaft verantwortlich. Seit Anfang 2026 selbstständig in Wien.
  {% endif %}
</div>
{% endif %}
{% endblock %}