<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% if ist_erinnerung %}Erinnerung: {% endif %}Nachweis-Aufforderung {{ halbjahr_label }}</title>
  <style>
    body { font-family: Arial, sans-serif; font-size: 15px; color: #222; background: #f5f5f5; margin: 0; padding: 0; }
    .container { max-width: 600px; margin: 32px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; }
    .header { background: #1a3a5c; color: #fff; padding: 28px 32px 20px; }
    .header h1 { margin: 0 0 4px; font-size: 20px; }
    .header p { margin: 0; font-size: 13px; opacity: 0.8; }
    .body { padding: 28px 32px; }
    .body p { line-height: 1.6; margin: 0 0 16px; }
    .cta-box { background: #f0f6ff; border: 1px solid #b0cce8; border-radius: 6px; padding: 20px; margin: 24px 0; text-align: center; }
    .cta-button { display: inline-block; background: #1a3a5c; color: #fff !important; text-decoration: none; padding: 12px 28px; border-radius: 5px; font-weight: bold; font-size: 16px; margin-bottom: 12px; }
    .qr-section { margin-top: 12px; }
    .qr-section img { width: 140px; height: 140px; display: block; margin: 8px auto 0; }
    .qr-section small { display: block; color: #666; font-size: 12px; margin-top: 4px; }
    .info-list { background: #fafafa; border-left: 3px solid #1a3a5c; padding: 12px 16px; margin: 16px 0; }
    .info-list li { margin-bottom: 4px; }
    .footer { background: #f0f0f0; padding: 16px 32px; font-size: 12px; color: #777; border-top: 1px solid #e0e0e0; }
    .reminder-banner { background: #fff3cd; border: 1px solid #ffc107; border-radius: 5px; padding: 10px 16px; margin-bottom: 16px; font-weight: bold; color: #856404; }
    .url-fallback { font-size: 12px; color: #555; word-break: break-all; margin-top: 8px; }
  </style>
</head>
<body>
<div class="container">
  <div class="header">
    <h1>van Hees-Theyssen-Vogel'sche Stiftung</h1>
    <p>Nachweis-Aufforderung &bull; {{ halbjahr_label }}</p>
  </div>
  <div class="body">
    {% if ist_erinnerung %}
    <div class="reminder-banner">&#128276; Erinnerung: Ihre Unterlagen stehen noch aus</div>
    {% endif %}

    <p>Sehr geehrte(r) {{ destinataer.vorname }} {{ destinataer.nachname }},</p>

    {% if ist_erinnerung %}
    <p>wir möchten Sie daran erinnern, dass Ihre Unterlagen für das <strong>{{ halbjahr_label }}</strong> noch ausstehen.</p>
    <p>Der Upload-Link läuft am <strong>{{ gueltig_bis|date:"d.m.Y" }}</strong> ab.</p>
    {% else %}
    <p>die van Hees-Theyssen-Vogel'sche Stiftung bittet Sie, Ihre Unterlagen für das <strong>{{ halbjahr_label }}</strong> einzureichen.</p>
    <p>Bitte reichen Sie bis zum <strong>{{ gueltig_bis|date:"d.m.Y" }}</strong> folgende Unterlagen ein:</p>
    <ul class="info-list">
      <li>Semesterbescheinigung / Ausbildungsnachweis</li>
      <li>Leistungsnachweise (Zeugnisse, Kreditpunkte etc.)</li>
      <li>Nachweis über Einkommenssituation und Vermögensverhältnisse</li>
    </ul>
    {% endif %}

    <div class="cta-box">
      <a href="{{ upload_url }}" class="cta-button">Unterlagen hochladen</a>
      {% if qr_code_base64 %}
      <div class="qr-section">
        <small>Oder QR-Code scannen:</small>
        <img src="data:image/png;base64,{{ qr_code_base64 }}" alt="QR-Code für Upload-Link">
      </div>
      {% endif %}
      <p class="url-fallback">{{ upload_url }}</p>
    </div>

    <p>Dieser Link ist <strong>einmalig verwendbar</strong> und gültig bis <strong>{{ gueltig_bis|date:"d.m.Y" }}</strong>.</p>
    <p>Falls Sie Fragen haben, wenden Sie sich bitte direkt an die Stiftung:<br>
       Tel. 02858/836780 &bull; <a href="mailto:Jan.Siebels@gmail.com">Jan.Siebels@gmail.com</a></p>

    <p>Mit freundlichen Grüßen</p>
    <p><strong>Jan Remmer Siebels</strong> &amp; <strong>Katrin Kleinpaß</strong><br>
    Rentmeister / Rentmeisterin</p>
  </div>
  <div class="footer">
    van Hees-Theyssen-Vogel'sche Stiftung &bull; Raesfelder Str. 3 &bull; 46499 Hamminkeln &bull; Tel. 02858/836780<br>
    Diese E-Mail wurde automatisch erzeugt. Bitte antworten Sie nicht direkt auf diese E-Mail.<br>
    <a href="{{ datenschutz_url }}" style="color:#999;">Datenschutzerklärung</a>
  </div>
</div>
</body>
</html>
