{% extends "base.html" %}

{% block title %}Einstellungen{% endblock %}
{% block heading %}Einstellungen{% endblock %}

{% block content %}

{# v1.7.0: Sub-Navigation als rechte sticky Sidebar (vertikal, gruppiert).
   Active-Section-Highlight beim Scrollen via IntersectionObserver.
   Wrapper macht 2-Spalten-Layout: Formular links, Sub-Nav rechts. #}
<style>
  .settings-layout {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto;
    align-items: start;
    /* Padding-bottom = 100px sorgt dafür dass die untere Sidebar-Kante nicht
       direkt am FAB-Button (bottom:24px right:24px, ca. 56px hoch) klebt */
    padding-bottom: 100px;
  }
  .settings-layout > .settings-form-col {
    min-width: 0;   /* prevents grid-blowout when forms are wide */
  }
  .settings-layout > .settings-form-col > form,
  .settings-layout > .settings-form-col > .card {
    max-width: 100%;
  }
  .settings-subnav {
    background: rgba(15, 22, 48, 0.94);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(232, 93, 47, 0.30);
    border-radius: 8px;
    padding: 12px 10px;
    position: sticky;
    top: 80px;
    /* max-height endet vor dem FAB damit nichts überlappt */
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    z-index: 8;
  }
  .settings-subnav .group-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    padding: 10px 8px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 4px;
  }
  .settings-subnav .group-label:first-child { border-top: none; margin-top: 0; padding-top: 0; }
  .settings-subnav a {
    display: block;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 4px;
    color: #d4d4d4;
    transition: background 0.12s, color 0.12s;
    text-decoration: none;
    margin: 1px 0;
  }
  .settings-subnav a:hover {
    background: rgba(232, 93, 47, 0.20);
    color: #fff;
  }
  .settings-subnav a.is-active {
    background: #E85D2F;
    color: #fff;
    font-weight: 600;
  }
  /* Mobil/Tablet (<1024px): Sub-Nav unter den Header, horizontal-scrollbar */
  @media (max-width: 1023px) {
    .settings-layout { grid-template-columns: 1fr; }
    .settings-subnav {
      position: relative;
      top: 0;
      max-height: none;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .settings-subnav .group-label {
      display: inline-block;
      border-top: none;
      margin: 0;
      padding: 4px 8px 4px 0;
    }
    .settings-subnav a {
      display: inline-block;
      margin: 0;
    }
  }
</style>

<div class="settings-layout">
  <div class="settings-form-col">
    {# Hier kommt das eigentliche Formular — siehe weiter unten #}

<script>
(function() {
  'use strict';
  // Active-Section-Highlight: erkennt welche Sektion aktuell im Viewport ist
  // und markiert den entsprechenden Sub-Nav-Link orange.
  const links = document.querySelectorAll('.settings-subnav a[data-section]');
  if (!links.length || !('IntersectionObserver' in window)) return;

  const sectionMap = new Map();   // section-id → link-element
  links.forEach(a => sectionMap.set(a.dataset.section, a));

  const sections = [];
  sectionMap.forEach((_, id) => {
    const el = document.getElementById(id);
    if (el) sections.push(el);
  });

  function setActive(sectionId) {
    links.forEach(a => a.classList.toggle('is-active',
                                          a.dataset.section === sectionId));
  }

  // Beobachter feuert wenn eine Sektion ins obere Viewport-Drittel kommt.
  // rootMargin pusht den "Trigger-Bereich" nach unten — sodass die aktive
  // Sektion erst beim Vorbeiscrollen wechselt, nicht direkt beim Sticky-Top.
  const obs = new IntersectionObserver((entries) => {
    // Wähle die obersten visible Sektion
    const visible = entries
      .filter(e => e.isIntersecting)
      .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
    if (visible.length > 0) {
      setActive(visible[0].target.id);
    }
  }, {
    // top -120 = unter dem Sticky-Sub-Nav, bottom -60% = nur das obere Drittel zählt
    rootMargin: '-120px 0px -60% 0px',
    threshold: 0,
  });
  sections.forEach(s => obs.observe(s));
})();
</script>

<div class="space-y-6 max-w-4xl mx-auto">

{# ---------- 0. ONBOARDING / DEMO-DATEN ---------- #}
<div class="card" id="onboarding" style="border-left: 3px solid #f2581b;">
  <div class="card-header"><div>
    <h2>👋 Onboarding</h2>
    <p class="sub">Hilfsmittel für neue Nutzer — Demo-Workflow + Handbuch</p>
  </div></div>
  <div class="p-5 grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
    <div>
      <p class="text-[11px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Demo-Workflow</p>
      <p class="mt-2" style="color: var(--card-text);">
        Erstellt einen kompletten <strong>Beispiel-Datensatz</strong>:
        Kunde → Anfrage → Angebot → Auftrag.
        Damit kannst du den Vertriebs-Workflow durchklicken ohne echte Daten zu verfälschen.
      </p>
      <button type="button" id="demo-load-btn" class="btn btn-primary mt-3">
        Demo-Workflow laden (1 Kunde)
      </button>
      <p id="demo-load-result" class="mt-2 text-xs"></p>

      <hr style="margin: 14px 0; border-color: rgba(255,255,255,0.10);">
      <p class="text-[11px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">
        Vor Pilot-Vorf&uuml;hrung: erweiterte Pipeline
      </p>
      <p class="mt-1 text-xs" style="color: rgba(255,255,255,0.65); line-height: 1.5;">
        Erstellt 6 Kunden + 12 Angebote + 8 Auftr&auml;ge + 6 Rechnungen + 2 Reklamationen
        &uuml;ber die letzten 90 Tage. Alle mit Suffix &bdquo;(DEMO-EXT)&ldquo;.
      </p>
      <div class="flex gap-2 mt-2 flex-wrap">
        <button type="button" id="demo-ext-load-btn" class="btn btn-secondary btn-sm">
          Extended-Demo laden
        </button>
        <button type="button" id="demo-ext-delete-btn" class="btn btn-secondary btn-sm">
          Extended-Demo l&ouml;schen
        </button>
      </div>
      <p id="demo-ext-result" class="mt-2 text-xs"></p>
    </div>
    <div>
      <p class="text-[11px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Handbuch</p>
      <p class="mt-2" style="color: var(--card-text);">
        180-Seiten-PDF mit allen Modulen, Screenshots und Workflow-Erklärungen.
        Verfügbar in DE / EN / ZH.
      </p>
      <div class="flex gap-2 mt-3 flex-wrap">
        <a class="btn btn-secondary btn-sm" href="/handbuch/de/pdf" target="_blank">📕 DE</a>
        <a class="btn btn-secondary btn-sm" href="/handbuch/en/pdf" target="_blank">📗 EN</a>
        <a class="btn btn-secondary btn-sm" href="/handbuch/zh/pdf" target="_blank">📘 ZH</a>
      </div>
    </div>
    <div>
      <p class="text-[11px] uppercase tracking-wider font-semibold" style="color: var(--card-text-muted);">Workflow auf einen Blick</p>
      <p class="mt-2 text-xs" style="color: rgba(255,255,255,0.65); line-height: 1.7;">
        📥 Anfrage<br>↓<br>
        💼 Angebot<br>↓<br>
        📋 Auftrag<br>↓<br>
        🏭 Werkstatt-Freigabe<br>↓<br>
        📦 Lieferschein<br>↓<br>
        🧾 Rechnung
      </p>
    </div>
  </div>

  {# === BUG-REPORT v1.10.6 === #}
  <div class="card mt-6" style="border-left: 3px solid #ef4444;">
    <h2 style="margin-top: 0;">Fehler an Takoma melden</h2>
    <p class="text-sm" style="color: var(--card-text-muted);">
      Wenn etwas nicht funktioniert: kurz beschreiben &mdash; das System schickt
      automatisch die letzten 100 Log-Zeilen, DB-Stats und Versions-Info an
      <code>info@takoma-digital.com</code>. Damit kann der Support direkt fixen
      ohne dass du Bildschirme aufnehmen musst.
    </p>
    <form id="bug-report-form" class="mt-3 flex flex-col gap-2" style="max-width: 600px;">
      <input type="email" id="br-email" placeholder="Deine E-Mail (optional, f&uuml;r R&uuml;ckmeldung)"
             class="input" style="padding: 8px;">
      <textarea id="br-desc" placeholder="Was ist passiert? Was hast du gemacht? Was hast du erwartet?"
                rows="5" required class="input" style="padding: 8px; resize: vertical;"></textarea>
      <button type="submit" class="btn btn-primary" style="align-self: flex-start;">
        Bug-Report senden
      </button>
    </form>
    <p id="br-result" class="mt-2 text-xs"></p>
  </div>

  <script>
    document.getElementById('bug-report-form').addEventListener('submit', async (e) => {
      e.preventDefault();
      const btn = e.target.querySelector('button[type=submit]');
      const out = document.getElementById('br-result');
      const desc = document.getElementById('br-desc').value.trim();
      const email = document.getElementById('br-email').value.trim();
      if (!desc) { out.textContent = 'Beschreibung darf nicht leer sein.'; return; }
      btn.disabled = true; btn.textContent = '... sende';
      out.textContent = '';
      try {
        const csrf = (document.cookie.split('; ').find(r => r.startsWith('csrf_token='))||'=').split('=')[1] || '';
        const r = await fetch('/api/bug-report', {
          method: 'POST',
          headers: {'X-CSRF-Token': csrf, 'Content-Type': 'application/json'},
          body: JSON.stringify({description: desc, user_email: email}),
        });
        const d = await r.json();
        if (d.ok) {
          out.innerHTML = '<span style="color:#16a34a;">Bug-Report verschickt &mdash; Danke!</span>';
          document.getElementById('br-desc').value = '';
        } else {
          out.innerHTML = '<span style="color:#dc2626;">' + (d.error || 'Fehler') + '</span>';
        }
      } catch (err) {
        out.innerHTML = '<span style="color:#dc2626;">' + err.message + '</span>';
      }
      btn.disabled = false; btn.textContent = 'Bug-Report senden';
    });
  </script>

  <script>
    document.getElementById('demo-load-btn').addEventListener('click', async () => {
      const btn = document.getElementById('demo-load-btn');
      const out = document.getElementById('demo-load-result');
      btn.disabled = true; btn.textContent = '⏳ Erstelle Demo-Daten…';
      try {
        const csrf = (document.cookie.split('; ').find(r => r.startsWith('csrf_token='))||'=').split('=')[1] || '';
        const r = await fetch('/api/demo-data/load', {
          method: 'POST',
          headers: {'X-CSRF-Token': csrf, 'Content-Type': 'application/json'},
          body: '{}',
        });
        const d = await r.json();
        if (d.ok) {
          out.innerHTML = '<span style="color:#6ee7b7;">✓ Demo-Workflow erstellt:</span> ' +
            '<a href="/inquiries/' + d.inquiry_id + '" style="color:#f2581b;text-decoration:underline;">Anfrage öffnen</a> · ' +
            '<a href="/quotes/' + d.quote_id + '" style="color:#f2581b;text-decoration:underline;">Angebot</a> · ' +
            (d.sales_order_id ? '<a href="/sales-orders/' + d.sales_order_id + '" style="color:#f2581b;text-decoration:underline;">Auftrag</a>' : '');
          btn.textContent = '✓ Erstellt';
        } else {
          out.innerHTML = '<span style="color:#fca5a5;">' + (d.error || 'Fehler') + '</span>';
          btn.textContent = '🎬 Demo-Workflow laden';
          btn.disabled = false;
        }
      } catch (e) {
        out.innerHTML = '<span style="color:#fca5a5;">Netzwerk-Fehler: ' + e.message + '</span>';
        btn.textContent = 'Demo-Workflow laden (1 Kunde)';
        btn.disabled = false;
      }
    });

    // Extended-Demo: Load
    document.getElementById('demo-ext-load-btn')?.addEventListener('click', async () => {
      const btn = document.getElementById('demo-ext-load-btn');
      const out = document.getElementById('demo-ext-result');
      btn.disabled = true; btn.textContent = '… läuft';
      try {
        const csrf = (document.cookie.split('; ').find(r => r.startsWith('csrf_token='))||'=').split('=')[1] || '';
        const r = await fetch('/api/demo-data/load-extended', {
          method: 'POST',
          headers: {'X-CSRF-Token': csrf, 'Content-Type': 'application/json'},
          body: '{}',
        });
        const d = await r.json();
        if (d.ok) {
          out.innerHTML = '<span style="color:#6ee7b7;">' +
            d.customers_added + ' Kunden · ' + d.quotes_added + ' Angebote · ' +
            d.orders_added + ' Aufträge · ' + d.invoices_added + ' Rechnungen · ' +
            d.complaints_added + ' Reklamationen erstellt.</span> ' +
            '<a href="/customers" style="color:#f2581b;">→ Kunden ansehen</a>';
        } else {
          out.innerHTML = '<span style="color:#fca5a5;">' + (d.error || 'Fehler') + '</span>';
        }
      } catch (e) {
        out.innerHTML = '<span style="color:#fca5a5;">' + e.message + '</span>';
      }
      btn.disabled = false; btn.textContent = 'Extended-Demo laden';
    });

    // Extended-Demo: Delete
    document.getElementById('demo-ext-delete-btn')?.addEventListener('click', async () => {
      if (!confirm('Wirklich alle (DEMO-EXT)-Datensätze löschen? Das kann nicht rückgängig gemacht werden.')) return;
      const btn = document.getElementById('demo-ext-delete-btn');
      const out = document.getElementById('demo-ext-result');
      btn.disabled = true; btn.textContent = '… läuft';
      try {
        const csrf = (document.cookie.split('; ').find(r => r.startsWith('csrf_token='))||'=').split('=')[1] || '';
        const r = await fetch('/api/demo-data/delete-extended', {
          method: 'POST',
          headers: {'X-CSRF-Token': csrf, 'Content-Type': 'application/json'},
          body: '{}',
        });
        const d = await r.json();
        if (d.ok) {
          const dl = d.deleted || {};
          out.innerHTML = '<span style="color:#fca5a5;">Gelöscht: ' +
            (dl.customers || 0) + ' Kunden · ' + (dl.quotes || 0) + ' Angebote · ' +
            (dl.orders || 0) + ' Aufträge · ' + (dl.invoices || 0) + ' Rechnungen · ' +
            (dl.complaints || 0) + ' Reklamationen.</span>';
        } else {
          out.innerHTML = '<span style="color:#fca5a5;">' + (d.error || 'Fehler') + '</span>';
        }
      } catch (e) {
        out.innerHTML = '<span style="color:#fca5a5;">' + e.message + '</span>';
      }
      btn.disabled = false; btn.textContent = 'Extended-Demo löschen';
    });
  </script>
</div>

</div>

<form method="post" action="/settings" class="space-y-6 max-w-4xl mx-auto">

  {# ---------- 1. FIRMENDATEN ---------- #}
  <div class="card" id="firma">
    <div class="card-header"><div>
      <h2>Firmendaten</h2>
      <p class="sub">Erscheinen auf Bestelldokumenten, Rechnungen und Reports</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      {% for label, key, span in [
        ("Firmenname", "company_name", 2),
        ("Adresse", "company_adress", 2),
        ("PLZ", "company_postcode", 1),
        ("Stadt", "company_city", 1),
        ("Telefon", "company_phone", 1),
        ("E-Mail", "company_mail", 1),
        ("USt-IdNr.", "company_vat_id", 1),
        ("Handelsregister", "company_registry", 1),
        ("Bank — IBAN", "company_iban", 1),
        ("Bank — BIC", "company_bic", 1),
        ("Steuernummer", "company_tax_no", 1),
        ("Geschäftsführer", "company_ceo", 1),
      ] %}
      <div {% if span == 2 %}class="col-span-2"{% endif %}>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">{{ label }}</label>
        <input class="input mt-1 w-full" type="text" name="setting_{{ key }}" value="{{ settings.get(key, '') or '' }}">
      </div>
      {% endfor %}
    </div>
  </div>

  {# ---------- 1a. RECHTLICHES / IMPRESSUM ---------- #}
  <div class="card" id="legal">
    <div class="card-header"><div>
      <h2>Rechtliches &amp; Impressum</h2>
      <p class="sub">Pflichtangaben für Geschäftsbriefe, Rechnungen und Impressum (§ 5 DDG, § 35a GmbHG, § 37a HGB)</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">

      {# --- Rechtsform & Gesellschafts-Sitz --- #}
      <div class="col-span-2">
        <p class="text-[11px] uppercase tracking-wider font-semibold mb-1" style="color: var(--brand-blue-light);">Rechtsform &amp; Sitz</p>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Rechtsform</label>
        <select name="setting_legal_form" class="select mt-1 w-full">
          {% set lf = settings.get('legal_form', '') %}
          {% for code, label in [
            ('','— bitte wählen —'),
            ('einzel','Einzelunternehmen'),
            ('ek','e.K. (eingetragener Kaufmann)'),
            ('gbr','GbR'),
            ('ohg','OHG'),
            ('kg','KG'),
            ('gmbh','GmbH'),
            ('ug','UG (haftungsbeschränkt)'),
            ('gmbh_co_kg','GmbH &amp; Co. KG'),
            ('ug_co_kg','UG &amp; Co. KG'),
            ('ag','AG'),
            ('se','SE'),
            ('llc','LLC (US)'),
            ('inc','Inc. (US)'),
            ('ltd','Ltd. (UK/IE)'),
            ('other','Sonstige'),
          ] %}
          <option value="{{ code }}" {% if lf == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Sitz der Gesellschaft</label>
        <input class="input mt-1 w-full" type="text" name="setting_legal_seat"
               value="{{ settings.get('legal_seat', '') or '' }}" placeholder="z.B. Köln · Deutschland">
        <p class="text-[10px] text-neutral-500 mt-1">Falls abweichend von der Geschäftsanschrift</p>
      </div>

      {# --- Handelsregister --- #}
      <div class="col-span-2 mt-2">
        <p class="text-[11px] uppercase tracking-wider font-semibold mb-1" style="color: var(--brand-blue-light);">Handelsregister</p>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Registergericht</label>
        <input class="input mt-1 w-full" type="text" name="setting_register_court"
               value="{{ settings.get('register_court', '') or '' }}" placeholder="z.B. Amtsgericht Köln">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">HR-Nummer (HRA/HRB)</label>
        <input class="input mt-1 w-full nums" type="text" name="setting_register_no"
               value="{{ settings.get('register_no', '') or '' }}" placeholder="z.B. HRB 12345">
      </div>

      {# --- Vertretungsberechtigte --- #}
      <div class="col-span-2 mt-2">
        <p class="text-[11px] uppercase tracking-wider font-semibold mb-1" style="color: var(--brand-blue-light);">Vertretungsberechtigte</p>
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Geschäftsführer / Inhaber / Vorstand</label>
        <textarea class="input mt-1 w-full" rows="2" name="setting_legal_representatives"
                  placeholder="z.B. Max Mustermann, Anna Beispiel">{{ settings.get('legal_representatives', '') or '' }}</textarea>
        <p class="text-[10px] text-neutral-500 mt-1">Mehrere durch Komma trennen — erscheint im Impressum</p>
      </div>

      {# --- Steuern --- #}
      <div class="col-span-2 mt-2">
        <p class="text-[11px] uppercase tracking-wider font-semibold mb-1" style="color: var(--brand-blue-light);">Steuern</p>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">USt-IdNr. (USt-ID)</label>
        <input class="input mt-1 w-full nums" type="text" name="setting_company_vat_id"
               value="{{ settings.get('company_vat_id', '') or '' }}" placeholder="DE123456789">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Steuernummer</label>
        <input class="input mt-1 w-full nums" type="text" name="setting_company_tax_no"
               value="{{ settings.get('company_tax_no', '') or '' }}" placeholder="z.B. 218/5800/1234">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Wirtschafts-IdNr. (W-IdNr)</label>
        <input class="input mt-1 w-full nums" type="text" name="setting_w_idnr"
               value="{{ settings.get('w_idnr', '') or '' }}" placeholder="optional · DE12345678910">
        <p class="text-[10px] text-neutral-500 mt-1">Pflicht ab dem Jahr nach BZSt-Mitteilung</p>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">EORI-Nummer (Zoll)</label>
        <input class="input mt-1 w-full nums" type="text" name="setting_eori"
               value="{{ settings.get('eori', '') or '' }}" placeholder="optional · für Drittland-Export">
      </div>

      {# --- Bank / Zahlungen --- #}
      <div class="col-span-2 mt-2">
        <p class="text-[11px] uppercase tracking-wider font-semibold mb-1" style="color: var(--brand-blue-light);">Bank &amp; Zahlungen</p>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bank</label>
        <input class="input mt-1 w-full" type="text" name="setting_bank_name"
               value="{{ settings.get('bank_name', '') or '' }}" placeholder="z.B. Sparkasse KölnBonn">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Kontoinhaber</label>
        <input class="input mt-1 w-full" type="text" name="setting_bank_holder"
               value="{{ settings.get('bank_holder', '') or '' }}" placeholder="falls abweichend vom Firmennamen">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">IBAN</label>
        <input class="input mt-1 w-full nums" type="text" name="setting_company_iban"
               value="{{ settings.get('company_iban', '') or '' }}" placeholder="DE00 0000 0000 0000 0000 00">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">BIC</label>
        <input class="input mt-1 w-full nums" type="text" name="setting_company_bic"
               value="{{ settings.get('company_bic', '') or '' }}" placeholder="z.B. COLSDE33XXX">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">SEPA-Gläubiger-ID</label>
        <input class="input mt-1 w-full nums" type="text" name="setting_sepa_creditor_id"
               value="{{ settings.get('sepa_creditor_id', '') or '' }}" placeholder="DE98ZZZ09999999999">
        <p class="text-[10px] text-neutral-500 mt-1">Für SEPA-Lastschriften, von Bundesbank vergeben</p>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Leitweg-ID (B2G)</label>
        <input class="input mt-1 w-full nums" type="text" name="setting_leitweg_id"
               value="{{ settings.get('leitweg_id', '') or '' }}" placeholder="optional · für eigene Behörden-Rechnungen">
      </div>

      {# --- Gewerbe / Aufsicht --- #}
      <div class="col-span-2 mt-2">
        <p class="text-[11px] uppercase tracking-wider font-semibold mb-1" style="color: var(--brand-blue-light);">Aufsicht &amp; Kammer</p>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Aufsichtsbehörde</label>
        <input class="input mt-1 w-full" type="text" name="setting_supervisory_authority"
               value="{{ settings.get('supervisory_authority', '') or '' }}" placeholder="falls reguliertes Gewerbe">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Berufskammer</label>
        <input class="input mt-1 w-full" type="text" name="setting_chamber"
               value="{{ settings.get('chamber', '') or '' }}" placeholder="z.B. IHK Köln · HWK Düsseldorf">
      </div>

      {# --- Datenschutz / DSGVO --- #}
      <div class="col-span-2 mt-2">
        <p class="text-[11px] uppercase tracking-wider font-semibold mb-1" style="color: var(--brand-blue-light);">Datenschutz (DSGVO)</p>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Datenschutzbeauftragter (DSB) — Name</label>
        <input class="input mt-1 w-full" type="text" name="setting_dpo_name"
               value="{{ settings.get('dpo_name', '') or '' }}" placeholder="optional · falls bestellt">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">DSB — E-Mail</label>
        <input class="input mt-1 w-full" type="email" name="setting_dpo_email"
               value="{{ settings.get('dpo_email', '') or '' }}" placeholder="datenschutz@firma.de">
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Verantwortlicher nach Art. 4 DSGVO</label>
        <input class="input mt-1 w-full" type="text" name="setting_dpo_responsible"
               value="{{ settings.get('dpo_responsible', '') or '' }}" placeholder="meist die Geschäftsführung — Name + Kontaktdaten">
      </div>

      {# --- Online-Pflichten --- #}
      <div class="col-span-2 mt-2">
        <p class="text-[11px] uppercase tracking-wider font-semibold mb-1" style="color: var(--brand-blue-light);">Online-Dokumente (URLs)</p>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">AGB-URL</label>
        <input class="input mt-1 w-full" type="url" name="setting_url_terms"
               value="{{ settings.get('url_terms', '') or '' }}" placeholder="https://…/agb">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Datenschutzerklärung-URL</label>
        <input class="input mt-1 w-full" type="url" name="setting_url_privacy"
               value="{{ settings.get('url_privacy', '') or '' }}" placeholder="https://…/datenschutz">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Impressum-URL</label>
        <input class="input mt-1 w-full" type="url" name="setting_url_imprint"
               value="{{ settings.get('url_imprint', '') or '' }}" placeholder="https://…/impressum">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Widerrufsbelehrung-URL</label>
        <input class="input mt-1 w-full" type="url" name="setting_url_revocation"
               value="{{ settings.get('url_revocation', '') or '' }}" placeholder="optional · bei B2C">
      </div>

      {# --- EU-Vertreter (DSGVO Art. 27) — Pflicht für Nicht-EU-Firmen ohne EU-Niederlassung --- #}
      <div class="col-span-2 mt-2 pt-3 border-t" style="border-color: var(--card-border-2);">
        <p class="text-[11px] uppercase tracking-wider font-bold" style="color: var(--brand-orange);">EU-Vertreter (DSGVO Art. 27)</p>
        <p class="text-[11px] mt-1" style="color: var(--card-text-muted);">
          Pflicht für Firmen mit Sitz außerhalb der EU (USA, UK, Schweiz, ...) die EU-Personen Waren/Dienstleistungen anbieten.
          Anbieter z.B. <a href="https://prighter.com" target="_blank" style="color: var(--brand-orange);">Prighter</a> (~480 €/Jahr).
          Felder erscheinen automatisch im Impressum + Datenschutzerklärung.
        </p>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">EU-Vertreter — Name / Firma</label>
        <input class="input mt-1 w-full" type="text" name="setting_eu_rep_name"
               value="{{ settings.get('eu_rep_name', '') or '' }}" placeholder="z.B. Prighter Services GmbH">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">EU-Vertreter — E-Mail</label>
        <input class="input mt-1 w-full" type="email" name="setting_eu_rep_email"
               value="{{ settings.get('eu_rep_email', '') or '' }}" placeholder="contact@prighter.com">
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">EU-Vertreter — Anschrift (Straße, PLZ, Ort, Land)</label>
        <input class="input mt-1 w-full" type="text" name="setting_eu_rep_address"
               value="{{ settings.get('eu_rep_address', '') or '' }}" placeholder="z.B. Praterstraße 1, 1020 Wien, Österreich">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">EU-Vertreter — Telefon (optional)</label>
        <input class="input mt-1 w-full" type="tel" name="setting_eu_rep_phone"
               value="{{ settings.get('eu_rep_phone', '') or '' }}" placeholder="+43 1 …">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">DPF-Zertifikat-Nr. (nur falls zertifiziert)</label>
        <input class="input mt-1 w-full" type="text" name="setting_dpf_id"
               value="{{ settings.get('dpf_id', '') or '' }}" placeholder="leer lassen, wenn keine aktive DPF-Zertifizierung besteht">
        <p class="text-[10px] text-neutral-500 mt-1">Nur eintragen, wenn das Unternehmen im EU-US Data Privacy Framework aktiv gelistet ist.</p>
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Verbraucherstreitbeilegung — Hinweis</label>
        <textarea class="input mt-1 w-full" rows="2" name="setting_consumer_dispute_resolution"
                  placeholder="Standard-Text §36 VSBG ODER „Wir nehmen nicht teil ..."">{{ settings.get('consumer_dispute_resolution', '') or '' }}</textarea>
        <p class="text-[10px] text-neutral-500 mt-1">Pflicht bei B2C — verlinkt auf <code>ec.europa.eu/consumers/odr</code></p>
      </div>

      {# --- Haftungsausschluss --- #}
      <div class="col-span-2 mt-2">
        <p class="text-[11px] uppercase tracking-wider font-semibold mb-1" style="color: var(--brand-blue-light);">Sonstiges</p>
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Haftungsausschluss / Disclaimer</label>
        <textarea class="input mt-1 w-full" rows="3" name="setting_disclaimer"
                  placeholder="optionaler Standard-Disclaimer für Rechnungs-PDFs / Webseite">{{ settings.get('disclaimer', '') or '' }}</textarea>
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Eigentumsvorbehalt — Klausel</label>
        <textarea class="input mt-1 w-full" rows="2" name="setting_retention_clause"
                  placeholder="Standard: „Die Ware bleibt bis zur vollständigen Bezahlung Eigentum von ...">{{ settings.get('retention_clause', '') or '' }}</textarea>
        <p class="text-[10px] text-neutral-500 mt-1">Wird automatisch in Rechnungs-Footer eingefügt (falls aktiviert)</p>
      </div>
    </div>
    <div class="px-5 py-3 border-t" style="border-color: var(--card-border-2);">
      <p class="text-[11px]" style="color: var(--card-text-muted);">
        💡 Diese Daten werden in Rechnungs-PDFs, im Briefkopf, im Impressum und in der ZUGFeRD/XRechnung-XML-Datei verwendet.
        Pflichtfelder ergeben sich aus § 5 DDG, § 35a GmbHG und § 14 UStG.
      </p>
    </div>
  </div>

  {# ---------- 1b. RECHNUNGSSTELLUNG & E-RECHNUNG ---------- #}
  <div class="card" id="billing">
    <div class="card-header"><div>
      <h2>Rechnungsstellung &amp; E-Rechnung</h2>
      <p class="sub">Steuerregime, ZUGFeRD-/XRechnung-Default, Zahlungsziel, Mahnstufen</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Sitz der Firma (ISO-Land)</label>
        <select name="setting_company_country_iso" class="select mt-1 w-full">
          {% set sel_cc = settings.get('company_country_iso', 'US') or 'US' %}
          {% for iso, name in [
            ('DE','Deutschland'),('AT','Österreich'),('CH','Schweiz'),
            ('US','USA'),('GB','Vereinigtes Königreich'),('FR','Frankreich'),
            ('NL','Niederlande'),('IT','Italien'),('ES','Spanien'),('PL','Polen'),
          ] %}
          <option value="{{ iso }}" {% if iso == sel_cc %}selected{% endif %}>{{ name }} ({{ iso }})</option>
          {% endfor %}
        </select>
        <p class="text-[10px] text-neutral-500 mt-1">Heimatland für USt-IdNr-Logik / EORI</p>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Steuerregime der Leistung</label>
        <select name="setting_invoice_supplier_country" class="select mt-1 w-full">
          {% set sel_sc = settings.get('invoice_supplier_country', 'DE') or 'DE' %}
          {% for iso, name in [
            ('DE','Deutsches USt-Recht (Default)'),
            ('AT','Österreichisches USt-Recht'),
            ('CH','Schweizer MWST'),
          ] %}
          <option value="{{ iso }}" {% if iso == sel_sc %}selected{% endif %}>{{ name }}</option>
          {% endfor %}
        </select>
        <p class="text-[10px] text-neutral-500 mt-1">Bestimmt Reverse-Charge / Export-Verhalten</p>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Standard-Rechnungsformat</label>
        <select name="setting_default_invoice_format" class="select mt-1 w-full">
          {% set sel_fmt = settings.get('default_invoice_format', 'zugferd') or 'zugferd' %}
          <option value="zugferd"   {% if sel_fmt=='zugferd'   %}selected{% endif %}>ZUGFeRD (PDF + XML, EU-Standard)</option>
          <option value="xrechnung" {% if sel_fmt=='xrechnung' %}selected{% endif %}>XRechnung (XML only — Behörden)</option>
          <option value="pdf"       {% if sel_fmt=='pdf'       %}selected{% endif %}>Klassisches PDF (ohne XML)</option>
        </select>
        <p class="text-[10px] text-neutral-500 mt-1">Pro Kunde überschreibbar</p>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Standard-Zahlungsziel (Tage)</label>
        <input class="input mt-1 w-full nums" type="number" min="0" max="120"
               name="setting_default_payment_terms_days"
               value="{{ settings.get('default_payment_terms_days', '14') or '14' }}">
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Rechnungswährung</label>
        <select name="setting_invoice_currency" class="select mt-1 w-full">
          {% set sel_cur = settings.get('invoice_currency', 'EUR') or 'EUR' %}
          {% for cur in ['EUR','USD','CHF','GBP'] %}
          <option value="{{ cur }}" {% if cur == sel_cur %}selected{% endif %}>{{ cur }}</option>
          {% endfor %}
        </select>
      </div>

      <div></div>

      <div class="col-span-2">
        <p class="text-[11px] uppercase tracking-wider font-semibold text-neutral-500 mt-2 mb-2">Mahnstufen (Tage nach Fälligkeit)</p>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">1. Mahnung</label>
        <input class="input mt-1 w-full nums" type="number" min="1" max="180"
               name="setting_dunning_level_1_days"
               value="{{ settings.get('dunning_level_1_days', '14') or '14' }}">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">2. Mahnung</label>
        <input class="input mt-1 w-full nums" type="number" min="1" max="180"
               name="setting_dunning_level_2_days"
               value="{{ settings.get('dunning_level_2_days', '28') or '28' }}">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">3. Mahnung (Inkasso)</label>
        <input class="input mt-1 w-full nums" type="number" min="1" max="180"
               name="setting_dunning_level_3_days"
               value="{{ settings.get('dunning_level_3_days', '42') or '42' }}">
      </div>

      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Rechnungs-Fußnote (Standard)</label>
        <textarea class="input mt-1 w-full" rows="2" name="setting_invoice_footer_note"
                  placeholder="Vielen Dank für Ihren Auftrag.">{{ settings.get('invoice_footer_note', '') or '' }}</textarea>
        <p class="text-[10px] text-neutral-500 mt-1">Erscheint klein unter den Beträgen auf jeder Rechnung — gilt für alle Dokument-Typen wenn unten nichts spezifisches gesetzt ist</p>
      </div>

    </div>
  </div>

  {# ---------- 1d. UPDATE-MANAGER (Status + manueller Check) ---------- #}
  <div class="card" id="updates">
    <div class="card-header"><div>
      <h2>Software-Updates</h2>
      <p class="sub">Auto-Check alle 24 Stunden — manueller Re-Check jederzeit möglich</p>
    </div></div>
    <div class="p-5">
      <div id="update-status-grid" class="grid grid-cols-3 gap-x-6 gap-y-3 mb-4">
        <div>
          <div class="text-[10px] uppercase tracking-wider text-neutral-500">Aktuelle Version</div>
          <div class="text-lg font-semibold mt-1" id="update-current-version">…</div>
        </div>
        <div>
          <div class="text-[10px] uppercase tracking-wider text-neutral-500">Verfügbare Version</div>
          <div class="text-lg font-semibold mt-1" id="update-latest-version">…</div>
        </div>
        <div>
          <div class="text-[10px] uppercase tracking-wider text-neutral-500">Status</div>
          <div class="text-lg font-semibold mt-1" id="update-status-label">…</div>
        </div>
        <div class="col-span-3">
          <div class="text-[10px] uppercase tracking-wider text-neutral-500">Letzter Check</div>
          <div class="text-sm mt-1" id="update-last-check">…</div>
        </div>
        <div class="col-span-3">
          <div class="text-[10px] uppercase tracking-wider text-neutral-500">Release-Notes</div>
          <div class="text-sm mt-1" id="update-release-notes" style="white-space:pre-wrap;">…</div>
        </div>
      </div>
      <div class="flex gap-3 items-center">
        <button type="button" class="btn btn-secondary btn-sm"
                onclick="checkForUpdates()">
          🔄 Jetzt auf Updates prüfen
        </button>
        <span id="update-check-status" class="text-xs text-neutral-500"></span>
      </div>
    </div>
  </div>

  <script>
    /* === Update-Manager === */
    function _formatRelative(iso) {
      if (!iso) return '–';
      try {
        var d = new Date(iso);
        var diff = (Date.now() - d.getTime()) / 1000;
        if (diff < 60) return 'gerade eben';
        if (diff < 3600) return Math.floor(diff / 60) + ' Min vor';
        if (diff < 86400) return Math.floor(diff / 3600) + ' h vor';
        return Math.floor(diff / 86400) + ' Tage vor';
      } catch(e) { return iso; }
    }
    function refreshUpdateStatus() {
      fetch('/api/update/state').then(r => r.json()).then(s => {
        document.getElementById('update-current-version').textContent = s.current || '–';
        document.getElementById('update-latest-version').textContent = s.latest || '(noch unbekannt)';
        var lblEl = document.getElementById('update-status-label');
        if (s.error) {
          lblEl.textContent = '⚠ Fehler';
          lblEl.style.color = '#ef4444';
        } else if (s.update_available) {
          lblEl.textContent = s.critical ? '🔴 Kritisch — bitte updaten' : '🆕 Update verfügbar';
          lblEl.style.color = s.critical ? '#ef4444' : '#10b981';
        } else if (s.checked_at) {
          lblEl.textContent = '✓ Aktuell';
          lblEl.style.color = '#10b981';
        } else {
          lblEl.textContent = 'noch nicht geprüft';
          lblEl.style.color = '';
        }
        var lc = document.getElementById('update-last-check');
        if (s.error) {
          lc.textContent = (s.checked_at ? _formatRelative(s.checked_at) : 'nie') + ' · ' + s.error;
          lc.style.color = '#ef4444';
        } else {
          lc.textContent = s.checked_at ? _formatRelative(s.checked_at) : 'nie';
          lc.style.color = '';
        }
        var rn = document.getElementById('update-release-notes');
        rn.textContent = s.release_notes || (s.update_available ? '(keine Release-Notes verfügbar)' : '–');
      });
    }
    function checkForUpdates() {
      var st = document.getElementById('update-check-status');
      st.textContent = '⏳ Prüfe takoma-digital.com/version.json…';
      st.style.color = '';
      fetch('/api/update/check', {method: 'POST'})
        .then(r => r.json())
        .then(d => {
          if (d.ok) {
            st.textContent = '✅ Check abgeschlossen';
            st.style.color = '#10b981';
            refreshUpdateStatus();
          } else {
            st.textContent = '⚠ ' + (d.error || 'Fehler');
            st.style.color = '#ef4444';
          }
        }).catch(e => {
          st.textContent = '⚠ Netzwerk-Fehler';
          st.style.color = '#ef4444';
        });
    }
    document.addEventListener('DOMContentLoaded', refreshUpdateStatus);
  </script>

  {# ---------- 1c. IMAP-AUTO-ANFRAGEN (Webformular → Anfrage) ---------- #}
  <div class="card" id="imap">
    <div class="card-header"><div>
      <h2>Webformular-Auto-Lesen (IMAP)</h2>
      <p class="sub">Ungelesene Mails werden automatisch zu Anfragen — alle 10 Minuten geprüft</p>
    </div></div>
    <div class="p-5 grid grid-cols-3 gap-x-6 gap-y-4">

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Aktiviert</label>
        <select class="select mt-1 w-full" name="setting_imap_enabled">
          <option value="0" {% if (settings.get('imap_enabled') or '0') == '0' %}selected{% endif %}>Nein (deaktiviert)</option>
          <option value="1" {% if (settings.get('imap_enabled') or '0') == '1' %}selected{% endif %}>Ja — Auto-Polling alle X Minuten</option>
        </select>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Prüf-Intervall (Minuten)</label>
        <input class="input mt-1 w-full nums" type="number" min="1" max="240"
               name="setting_imap_check_interval_min"
               value="{{ settings.get('imap_check_interval_min', '10') or '10' }}">
        <p class="text-[10px] text-neutral-500 mt-1">Default 10 — Schutz vor Server-Banhammer: minimum 1</p>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Subject-Filter (optional)</label>
        <input class="input mt-1 w-full" type="text"
               name="setting_imap_subject_filter"
               value="{{ settings.get('imap_subject_filter') or '' }}"
               placeholder="z.B. Anfrage oder [WEBFORMULAR]">
        <p class="text-[10px] text-neutral-500 mt-1">Leer = alle ungelesenen Mails — sonst nur Mails mit diesem Subject-Pattern</p>
      </div>

      <div class="col-span-3">
        <hr class="my-2" style="border-color: var(--card-border);">
        <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500 mb-2">
          IMAP-Server-Zugangsdaten (z. B. STRATO, IONOS, eigener Mail-Server)
        </p>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">IMAP-Host</label>
        <input class="input mt-1 w-full" type="text"
               name="setting_imap_host"
               value="{{ settings.get('imap_host') or '' }}"
               placeholder="imap.strato.de">
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Port</label>
        <input class="input mt-1 w-full nums" type="number" min="1" max="65535"
               name="setting_imap_port"
               value="{{ settings.get('imap_port', '993') or '993' }}">
        <p class="text-[10px] text-neutral-500 mt-1">993 für IMAPS (verschlüsselt)</p>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Postfach-Ordner</label>
        <input class="input mt-1 w-full" type="text"
               name="setting_imap_folder"
               value="{{ settings.get('imap_folder', 'INBOX') or 'INBOX' }}">
        <p class="text-[10px] text-neutral-500 mt-1">Standard: INBOX</p>
      </div>

      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Benutzername</label>
        <input class="input mt-1 w-full" type="text"
               name="setting_imap_user"
               value="{{ settings.get('imap_user') or '' }}"
               placeholder="info@takoma-digital.com">
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Passwort</label>
        <input class="input mt-1 w-full" type="password"
               name="setting_imap_pass"
               value=""
               placeholder="{% if settings.get('imap_pass') %}(gesetzt — leer lassen behält Wert){% else %}IMAP-Passwort{% endif %}"
               autocomplete="new-password">
        <p class="text-[10px] text-neutral-500 mt-1">Wird als Plaintext gespeichert (Pilot-Phase). Leer lassen behält den aktuellen Wert.</p>
      </div>

      <div class="col-span-3 flex gap-3 mt-2 items-center">
        <button type="button" class="btn btn-secondary btn-sm"
                onclick="testImapConnection()">
          🔍 Jetzt prüfen (manuell)
        </button>
        <span id="imap-status" class="text-xs text-neutral-500"></span>
      </div>

      {# ----- IMAP-Statistik unten ----- #}
      <div class="col-span-3" id="imap-stats" style="display:none;">
        <hr class="my-3" style="border-color: var(--card-border);">
        <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500 mb-2">
          Statistik seit App-Start
        </p>
        <div class="grid grid-cols-3 gap-x-6">
          <div>
            <div class="text-[10px] uppercase text-neutral-500">Letzter Check</div>
            <div class="text-sm font-medium" id="imap-last-check">–</div>
          </div>
          <div>
            <div class="text-[10px] uppercase text-neutral-500">Mails verarbeitet</div>
            <div class="text-sm font-medium nums" id="imap-msg-count">0</div>
          </div>
          <div>
            <div class="text-[10px] uppercase text-neutral-500">Anfragen erzeugt</div>
            <div class="text-sm font-medium nums" id="imap-inq-count">0</div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <script>
    /* IMAP: Status laden + Stats anzeigen */
    function refreshImapStats() {
      fetch('/api/imap/state').then(r => r.json()).then(d => {
        if (!d.ok) return;
        var s = d.state || {};
        if (s.messages_processed_total > 0 || s.last_check) {
          document.getElementById('imap-stats').style.display = 'block';
          document.getElementById('imap-last-check').textContent = s.last_check ? _formatRelative(s.last_check) : 'nie';
          document.getElementById('imap-msg-count').textContent = s.messages_processed_total || 0;
          document.getElementById('imap-inq-count').textContent = s.inquiries_created_total || 0;
        }
      });
    }
    /* IMAP: manueller Test-Button */
    function testImapConnection() {
      var st = document.getElementById('imap-status');
      st.textContent = '⏳ Prüfe Verbindung + neue Mails…';
      st.style.color = '';
      fetch('/api/imap/check', {method: 'POST', headers: {'X-CSRF-Token': '{{ csrf_token or "" }}'}})
        .then(r => r.json())
        .then(d => {
          if (d.ok) {
            var s = d.state || {};
            if (s.last_error) {
              st.textContent = '⚠ Fehler: ' + s.last_error;
              st.style.color = '#ef4444';
            } else {
              st.textContent = '✅ ' + (s.messages_in_last_run || 0) + ' Mails verarbeitet';
              st.style.color = '#10b981';
              refreshImapStats();
            }
          } else {
            st.textContent = '⚠ ' + (d.error || 'unbekannter Fehler');
            st.style.color = '#ef4444';
          }
        })
        .catch(e => {
          st.textContent = '⚠ Netzwerk-Fehler';
          st.style.color = '#ef4444';
        });
    }
    document.addEventListener('DOMContentLoaded', refreshImapStats);
  </script>

  {# ---------- 1b. PDF-LAYOUT-ANPASSUNGEN (Brand-Farben + Doc-spezifische Footer) ---------- #}
  <div class="card" id="pdf-customization">
    <div class="card-header"><div>
      <h2>PDF-Layout & Brand-Farben</h2>
      <p class="sub">Anpassbare Farben und Footer-Texte pro Dokument-Typ</p>
    </div></div>
    <div class="p-5 grid grid-cols-3 gap-x-6 gap-y-4">

      {# ----- Brand-Farben ----- #}
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Primärfarbe (Akzent)</label>
        <div class="mt-1 flex gap-2 items-center">
          <input type="color" name="setting_pdf_color_primary_picker"
                 value="#{{ (settings.get('pdf_color_primary') or 'E85D2F')|replace('#','') }}"
                 onchange="this.nextElementSibling.value=this.value.replace('#','').toUpperCase()"
                 style="width:42px;height:42px;border:1px solid var(--card-border);border-radius:6px;cursor:pointer;">
          <input class="input nums flex-1" type="text" maxlength="7"
                 name="setting_pdf_color_primary"
                 value="{{ (settings.get('pdf_color_primary') or 'E85D2F')|replace('#','') }}"
                 placeholder="E85D2F">
        </div>
        <p class="text-[10px] text-neutral-500 mt-1">Hex ohne # — z. B. E85D2F</p>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Sekundärfarbe (Tabellen-Header)</label>
        <div class="mt-1 flex gap-2 items-center">
          <input type="color" name="setting_pdf_color_secondary_picker"
                 value="#{{ (settings.get('pdf_color_secondary') or '1e3a8a')|replace('#','') }}"
                 onchange="this.nextElementSibling.value=this.value.replace('#','').toUpperCase()"
                 style="width:42px;height:42px;border:1px solid var(--card-border);border-radius:6px;cursor:pointer;">
          <input class="input nums flex-1" type="text" maxlength="7"
                 name="setting_pdf_color_secondary"
                 value="{{ (settings.get('pdf_color_secondary') or '1e3a8a')|replace('#','') }}"
                 placeholder="1e3a8a">
        </div>
        <p class="text-[10px] text-neutral-500 mt-1">z. B. Brand-Blau, RGB-Hex</p>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Textfarbe (Haupttext)</label>
        <div class="mt-1 flex gap-2 items-center">
          <input type="color" name="setting_pdf_color_text_picker"
                 value="#{{ (settings.get('pdf_color_text') or '1a1a1a')|replace('#','') }}"
                 onchange="this.nextElementSibling.value=this.value.replace('#','').toUpperCase()"
                 style="width:42px;height:42px;border:1px solid var(--card-border);border-radius:6px;cursor:pointer;">
          <input class="input nums flex-1" type="text" maxlength="7"
                 name="setting_pdf_color_text"
                 value="{{ (settings.get('pdf_color_text') or '1a1a1a')|replace('#','') }}"
                 placeholder="1a1a1a">
        </div>
        <p class="text-[10px] text-neutral-500 mt-1">Default: #1a1a1a (fast schwarz)</p>
      </div>

      {# ----- Layout-Stil + Logo-Optionen ----- #}
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Layout-Stil</label>
        <select class="select mt-1 w-full" name="setting_pdf_layout_style">
          {% for code, label in [("modern","Modern (Standard)"),("classic","Klassisch konservativ"),("minimal","Minimal puristisch")] %}
            <option value="{{ code }}" {% if (settings.get('pdf_layout_style') or 'modern') == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Logo anzeigen</label>
        <select class="select mt-1 w-full" name="setting_pdf_show_logo">
          <option value="1" {% if (settings.get('pdf_show_logo') or '1') == '1' %}selected{% endif %}>Ja</option>
          <option value="0" {% if (settings.get('pdf_show_logo') or '1') == '0' %}selected{% endif %}>Nein (kein Logo)</option>
        </select>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Logo-Position</label>
        <select class="select mt-1 w-full" name="setting_pdf_logo_position">
          {% for code, label in [("left","Links"),("center","Zentriert"),("right","Rechts")] %}
            <option value="{{ code }}" {% if (settings.get('pdf_logo_position') or 'left') == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>

      {# ----- v1.7.0: Logo + Briefpapier (Drag&Drop) + Live-Beleg-Vorschau ----- #}
      <div class="col-span-3">
        <hr class="my-2" style="border-color: var(--card-border);">
        <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500 mb-2">
          Branding &amp; Beleg-Vorschau (Drag &amp; Drop)
        </p>

        {# v1.18.0: Demo-Briefpapier-Warnung. Sichtbar solange der Kunde
           noch nicht sein eigenes Briefpapier hochgeladen hat. #}
        {% if letterhead_is_demo %}
          <div style="background:#fef3c7;border:1px solid #fbbf24;border-radius:6px;
                      padding:10px 12px;margin-bottom:10px;display:flex;align-items:flex-start;gap:10px;">
            <div style="flex-shrink:0;color:#b45309;font-weight:700;font-size:11px;
                        background:#fbbf24;color:#000;padding:2px 6px;border-radius:3px;
                        letter-spacing:0.5px;">DEMO</div>
            <div style="flex:1;font-size:12px;color:#78350f;line-height:1.5;">
              <strong>Aktuell ist das mitgelieferte Demo-Briefpapier aktiv.</strong>
              Belege werden mit „Beispiel GmbH"-Footer generiert.
              Lade dein eigenes Briefpapier (einseitiges PDF, A4) hoch, sonst erscheint
              dieser Platzhalter auf jeder Rechnung an deine Kunden.
            </div>
          </div>
        {% endif %}

        {# Logo + Briefpapier-Quick-Upload als 2-Spalten-Block (oben).
           Beide sind Drag&Drop UND Click-zum-Upload. Der untere Bereich
           zeigt die Live-Beleg-Vorschau. #}
        <div class="grid grid-cols-2 gap-3 mb-3">
          <div id="logo-drop" class="branding-drop"
               style="border:2px dashed #cbd5e1;border-radius:6px;padding:12px;text-align:center;
                      background:#f8fafc;cursor:pointer;min-height:88px;display:flex;
                      flex-direction:column;align-items:center;justify-content:center;
                      transition:border-color 0.2s;">
            {% if settings.get('pdf_logo_path') %}
              <img src="{{ settings.get('pdf_logo_path') }}?v={{ range(1,9999)|random }}"
                   alt="Logo" style="max-height:50px;max-width:160px;object-fit:contain;">
              <div class="text-[9px] text-neutral-500 mt-1">Klicken zum Ersetzen ·
                <button type="button" id="logo-remove" style="color:#b91c1c;text-decoration:underline;">entfernen</button>
              </div>
            {% else %}
              <div class="text-[12px] text-neutral-700 font-medium">📎 Firmenlogo hochladen</div>
              <div class="text-[10px] text-neutral-500 mt-1">PNG / JPG / SVG · max. 2 MB</div>
            {% endif %}
            <input type="file" id="logo-file-input" accept=".png,.jpg,.jpeg,.svg,.webp" style="display:none;">
          </div>
          <div id="letterhead-quick-drop" class="branding-drop"
               style="border:2px dashed #cbd5e1;border-radius:6px;padding:12px;text-align:center;
                      background:#f8fafc;cursor:pointer;min-height:88px;display:flex;
                      flex-direction:column;align-items:center;justify-content:center;
                      transition:border-color 0.2s;">
            {% if has_letterhead %}
              <div style="display:flex;align-items:center;gap:8px;">
                {% if letterhead_is_demo %}
                  <svg viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" width="18" height="18">
                    <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                    <line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
                  </svg>
                  <span class="text-[12px] text-amber-700 font-medium">Demo-Briefpapier aktiv</span>
                {% else %}
                  <svg viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" width="18" height="18">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
                  </svg>
                  <span class="text-[12px] text-neutral-700 font-medium">Eigenes Briefpapier aktiv</span>
                {% endif %}
              </div>
              <div class="text-[9px] text-neutral-500 mt-1">Klicken zum {% if letterhead_is_demo %}Hochladen{% else %}Ersetzen{% endif %} ·
                <button type="button" id="letterhead-quick-remove" style="color:#b91c1c;text-decoration:underline;">entfernen</button>
              </div>
            {% else %}
              <div class="text-[12px] text-neutral-700 font-medium">📄 Briefpapier hochladen</div>
              <div class="text-[10px] text-neutral-500 mt-1">PDF einseitig · max. 5 MB</div>
            {% endif %}
            <input type="file" id="letterhead-file-input" accept=".pdf" style="display:none;">
          </div>
        </div>

        <div class="mt-1"
             style="border:1px solid var(--card-border);border-radius:8px;padding:0;
                    background:#f8fafc;min-height:680px;display:flex;
                    flex-direction:column;overflow:hidden;position:relative;">
          <div style="position:absolute;top:8px;left:8px;z-index:2;pointer-events:none;">
            <span style="background:rgba(255,255,255,0.95);color:#0f172a;
                         font-size:10px;padding:3px 8px;border-radius:4px;
                         border:1px solid #cbd5e1;font-weight:500;">
              {% if has_letterhead %}{% if letterhead_is_demo %}🟡 Vorschau mit Demo-Briefpapier{% else %}🟢 Vorschau mit Briefpapier{% endif %}{% else %}⚪ Vorschau ohne Briefpapier{% endif %}
            </span>
          </div>
          <embed id="branding-preview-embed"
                 src="/api/branding/preview.pdf?v={{ range(1,9999)|random }}#toolbar=0&navpanes=0"
                 type="application/pdf"
                 style="width:100%;height:680px;border:0;display:block;background:#fff;">
        </div>
        <div class="text-[10px] text-neutral-500 mt-2">
          Live-Vorschau eines Beispiel-Belegs — aktualisiert sich automatisch wenn du
          Farben, Layout oder Logo-Position oben änderst (kein Speichern nötig).
        </div>
      </div>

      {# ----- Doc-spezifische Footer ----- #}
      <div class="col-span-3">
        <hr class="my-2" style="border-color: var(--card-border);">
        <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500 mb-2">
          Footer-Texte pro Dokument-Typ (überschreiben Standard-Fußnote oben)
        </p>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Angebot-Footer</label>
        <textarea class="input mt-1 w-full" rows="2" name="setting_pdf_footer_quote"
                  placeholder="(leer = Standard-Fußnote nutzen)">{{ settings.get('pdf_footer_quote', '') or '' }}</textarea>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Rechnung-Footer</label>
        <textarea class="input mt-1 w-full" rows="2" name="setting_pdf_footer_invoice"
                  placeholder="(leer = Standard-Fußnote nutzen)">{{ settings.get('pdf_footer_invoice', '') or '' }}</textarea>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Lieferschein-Footer</label>
        <textarea class="input mt-1 w-full" rows="2" name="setting_pdf_footer_delivery_note"
                  placeholder="(leer = Standard-Fußnote nutzen)">{{ settings.get('pdf_footer_delivery_note', '') or '' }}</textarea>
      </div>

      <div class="col-span-3">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Mahnung-Footer</label>
        <textarea class="input mt-1 w-full" rows="2" name="setting_pdf_footer_dunning"
                  placeholder="z. B. Wir bitten Sie um Begleichung der noch offenen Forderung. Bei Fragen erreichen Sie uns unter ...">{{ settings.get('pdf_footer_dunning', '') or '' }}</textarea>
      </div>

    </div>
  </div>

  {# ---------- 2. GLOBALE EINSTELLUNGEN ---------- #}
  <div class="card" id="global">
    <div class="card-header"><div>
      <h2>Globale Einstellungen</h2>
      <p class="sub">Sprache, Währung, Formate</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Sprache</label>
        <select class="select mt-1 w-full" name="setting_global_language">
          {% for code, label in [("de-DE","Deutsch"),("en-US","English")] %}
            <option value="{{ code }}" {% if settings.get('global_language') == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Währung</label>
        <input class="input mt-1 w-full" type="text" name="setting_global_currency" value="{{ settings.get('global_currency', 'EUR') or 'EUR' }}">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Dezimaltrennzeichen</label>
        <input class="input mt-1 w-full" type="text" name="setting_global_decimal" value="{{ settings.get('global_decimal', ',') or ',' }}" maxlength="1">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Tausender-Trenner</label>
        <input class="input mt-1 w-full" type="text" name="setting_global_thousand" value="{{ settings.get('global_thousand', '.') or '.' }}" maxlength="1">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Datumsformat</label>
        <select class="select mt-1 w-full" name="setting_global_date_format">
          {% for fmt in ["DD.MM.YYYY","YYYY-MM-DD","MM/DD/YYYY"] %}
            <option value="{{ fmt }}" {% if settings.get('global_date_format', 'DD.MM.YYYY') == fmt %}selected{% endif %}>{{ fmt }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Standard-USt-Satz</label>
        <select class="select mt-1 w-full" name="setting_global_tax_rate">
          {% for r in ["19","7","0"] %}
            <option value="{{ r }}" {% if settings.get('global_tax_rate', '19') == r %}selected{% endif %}>{{ r }} %</option>
          {% endfor %}
        </select>
      </div>
    </div>
  </div>

  {# ---------- 3. BELEGNUMMERN ---------- #}
  <div class="card" id="numbers">
    <div class="card-header"><div>
      <h2>Belegnummern</h2>
      <p class="sub">Format und Zähler je Belegart — Variablen: <code class="text-blue-400">{YYYY}</code> Jahr · <code class="text-blue-400">{MM}</code> Monat · <code class="text-blue-400">####</code> Counter</p>
    </div></div>
    <table class="data-table">
      <thead>
        <tr><th>Belegart</th><th>Format</th><th class="num">Nächste Nummer</th><th>Zurücksetzen</th></tr>
      </thead>
      <tbody>
        {% for label, key in [
          ("Bestellung", "ordernum_order"),
          ("Werkzeugausgabe", "ordernum_rental"),
          ("Wareneingang", "ordernum_receipt"),
          ("Lieferschein", "ordernum_delivery"),
          ("Inventur", "ordernum_inventory"),
        ] %}
        <tr>
          <td class="font-medium">{{ label }}</td>
          <td><input class="input nums w-full" type="text" name="setting_{{ key }}_format" value="{{ settings.get(key ~ '_format', 'BST-{YYYY}-####') or 'BST-{YYYY}-####' }}"></td>
          <td><input class="input nums w-24" type="number" name="setting_{{ key }}_next" value="{{ settings.get(key ~ '_next', '1') or '1' }}" min="1"></td>
          <td>
            <select class="select w-full" name="setting_{{ key }}_reset">
              {% for r, l in [("never","nie"),("year","jährlich"),("month","monatlich")] %}
                <option value="{{ r }}" {% if settings.get(key ~ '_reset', 'year') == r %}selected{% endif %}>{{ l }}</option>
              {% endfor %}
            </select>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {# ---------- 3a. KALKULATION — Stundensätze + Faktoren ---------- #}
  </form>{# Schließen das outer settings-form, damit die Calc-Sektion eigenes form hat #}

  <div class="card max-w-4xl mx-auto" id="calc" style="margin-bottom: 1.5rem;">
    <div class="card-header"><div>
      <h2>Kalkulation</h2>
      <p class="sub">Stundensätze pro Bearbeitungs-Schritt + globale Faktoren (Material, Gemeinkosten)</p>
    </div></div>

    <form method="post" action="/settings/calc" class="p-5 grid grid-cols-3 gap-4 border-b" style="border-color: var(--card-border-2);">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Default-Stundensatz (€/h)</label>
        <input class="input mt-1 w-full nums" type="text" name="default_hourly_rate"
               value="{{ '%.2f'|format(calc.default_hourly_rate) }}" placeholder="85,00">
        <p class="text-[10px] text-neutral-500 mt-1">Greift, wenn ein Schritt unten keinen eigenen Satz hat</p>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Material-Faktor</label>
        <input class="input mt-1 w-full nums" type="text" name="default_material_factor"
               value="{{ '%.2f'|format(calc.default_material_factor) }}" placeholder="1,15">
        <p class="text-[10px] text-neutral-500 mt-1">Aufschlag auf Einkaufspreis → Plan (z.B. 1,15 = +15&nbsp;%)</p>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Gemeinkosten-Aufschlag (%)</label>
        <input class="input mt-1 w-full nums" type="text" name="default_overhead_pct"
               value="{{ '%.1f'|format(calc.default_overhead_pct) }}" placeholder="0">
        <p class="text-[10px] text-neutral-500 mt-1">Wird in der Nachkalkulation auf die Stundenkosten gerechnet</p>
      </div>
      <div class="col-span-3 flex justify-end">
        <button class="btn btn-primary" type="submit">Globale Werte speichern</button>
      </div>
    </form>

    <div class="p-5">
      <p class="text-[11px] uppercase tracking-wider font-semibold text-neutral-500 mb-2">Stundensätze pro Bearbeitungs-Schritt</p>
      <table class="data-table">
        <thead>
          <tr>
            <th style="width:40px"></th>
            <th>Schritt</th>
            <th>Code</th>
            <th class="num">Stundensatz (€/h)</th>
            <th class="text-xs text-neutral-500">Hinweis</th>
          </tr>
        </thead>
        <tbody>
          {% for s in process_steps %}
          <tr>
            <td><span style="display:inline-block;width:14px;height:14px;border-radius:50%;background:{{ s.color or '#737373' }};vertical-align:middle;"></span></td>
            <td class="font-semibold">{{ s.name }}</td>
            <td class="text-xs nums text-neutral-500">{{ s.code }}</td>
            <td class="num">
              <input class="input nums w-32 text-right step-rate-input" type="text"
                     data-step-id="{{ s.id }}"
                     value="{{ '%.2f'|format(s.hourly_rate) if s.hourly_rate is not none else '' }}"
                     placeholder="Default ({{ '%.2f'|format(calc.default_hourly_rate) }})">
            </td>
            <td class="text-[11px] text-neutral-500">
              {% if s.hourly_rate is none %}— Default-Satz wird genutzt{% else %}eigener Satz aktiv{% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      <p class="text-[10px] text-neutral-500 mt-2">Leeres Feld = Default-Stundensatz greift. Änderungen werden beim Verlassen des Felds automatisch gespeichert.</p>
    </div>
  </div>

  <script>
  (function () {
    function getCookie(n) { return document.cookie.split('; ').find(r => r.startsWith(n + '='))?.split('=')[1] || ''; }
    document.querySelectorAll('.step-rate-input').forEach(inp => {
      let last = inp.value;
      inp.addEventListener('blur', () => {
        if (inp.value === last) return;
        last = inp.value;
        const stepId = inp.dataset.stepId;
        const csrf = getCookie('csrf_token');
        fetch('/api/process-steps/' + stepId + '/rate', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
          body: JSON.stringify({ hourly_rate: inp.value, csrf_token: csrf }),
        })
        .then(r => r.json())
        .then(d => {
          if (d.ok) {
            if (window.toast) toast(d.hourly_rate == null ? 'Default-Satz aktiv' : 'Stundensatz gespeichert', 'success', { ttl: 1500 });
          } else if (window.toast) toast(d.error || 'Fehler', 'error');
        });
      });
      inp.addEventListener('keydown', e => {
        if (e.key === 'Enter') { e.preventDefault(); inp.blur(); }
      });
    });
  })();
  </script>

  <form method="post" action="/settings" class="space-y-6 max-w-4xl mx-auto">{# Outer settings-form fortsetzen #}

  {# ---------- 3b. WERKZEUG-WOCHENBUDGET ---------- #}
  <div class="card" id="budget">
    <div class="card-header"><div>
      <h2>Werkzeug-Wochenbudget</h2>
      <p class="sub">Maximale Werkzeug- und Verbrauchsmaterial-Kosten pro Woche — wird live im Dashboard angezeigt</p>
    </div></div>
    <div class="p-5 space-y-4">
      <div class="flex items-center justify-between">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Wöchentliches Budget</label>
        <span id="budget-display" class="font-bold text-2xl nums" style="color:#2563EB;">
          {% set budget_val = settings.get('weekly_tool_budget', '500')|float if settings.get('weekly_tool_budget') else 500 %}
          {{ "{:,.0f}".format(budget_val).replace(",", ".") }} €
        </span>
      </div>
      <input
        type="range"
        id="budget-slider"
        name="setting_weekly_tool_budget"
        min="0" max="10000" step="100"
        value="{{ settings.get('weekly_tool_budget', '500') or '500' }}"
        class="w-full"
        style="accent-color:#2563EB;"
        oninput="document.getElementById('budget-display').textContent = Number(this.value).toLocaleString('de-DE') + ' €'; document.getElementById('budget-input').value = this.value;">
      <div class="flex items-center justify-between text-[11px] text-neutral-500 nums">
        <span>0 €</span>
        <span>2.000 €</span>
        <span>4.000 €</span>
        <span>6.000 €</span>
        <span>8.000 €</span>
        <span>10.000 €</span>
      </div>
      <div class="flex items-center gap-3 pt-2">
        <label class="text-xs text-neutral-600">Exakter Wert (€):</label>
        <input
          type="number" id="budget-input"
          min="0" max="10000" step="50"
          value="{{ settings.get('weekly_tool_budget', '500') or '500' }}"
          class="input nums w-32"
          oninput="document.getElementById('budget-slider').value = this.value; document.getElementById('budget-display').textContent = Number(this.value).toLocaleString('de-DE') + ' €';">
        <span class="text-xs text-neutral-500">— max. 10.000 € · wird in Dashboard und Auswertungen berücksichtigt</span>
      </div>
    </div>
  </div>

  {# ---------- 4. BESTAND & BESCHAFFUNG ---------- #}
  <div class="card" id="stock">
    <div class="card-header"><div>
      <h2>Bestand & Beschaffung</h2>
      <p class="sub">Default-Werte für neue Artikel und automatische Bestellauslösung</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Default Lieferzeit (Tage)</label>
        <input class="input mt-1 w-full nums" type="number" name="setting_stock_default_lead_days" value="{{ settings.get('stock_default_lead_days', '7') or '7' }}" min="0">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Default Bestellmenge bei Mindestbestand</label>
        <input class="input mt-1 w-full nums" type="number" name="setting_stock_default_reorder_qty" value="{{ settings.get('stock_default_reorder_qty', '10') or '10' }}" min="1">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Lagerbewertung</label>
        <select class="select mt-1 w-full" name="setting_stock_valuation">
          {% for code, label in [("avg","Gleitender Durchschnitt"),("fifo","FIFO (First-In-First-Out)"),("lifo","LIFO (Last-In-First-Out)")] %}
            <option value="{{ code }}" {% if settings.get('stock_valuation', 'avg') == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Auto-Bestellung bei Mindestbestand</label>
        <select class="select mt-1 w-full" name="setting_stock_auto_order">
          <option value="off" {% if settings.get('stock_auto_order', 'off') == 'off' %}selected{% endif %}>Aus</option>
          <option value="suggest" {% if settings.get('stock_auto_order') == 'suggest' %}selected{% endif %}>Bestellvorschlag erstellen</option>
          <option value="auto" {% if settings.get('stock_auto_order') == 'auto' %}selected{% endif %}>Automatisch versenden (nur wenn Auto-Lieferant aktiv)</option>
        </select>
      </div>
    </div>
  </div>

  {# ---------- v1.12.1: Erweiterte Features (Feature-Toggles) ---------- #}
  <div class="card" id="features">
    <div class="card-header"><div>
      <h2>Erweiterte Features <span style="font-weight:400;font-size:13px;color:var(--card-text-muted);">· v1.12.1</span></h2>
      <p class="sub">Optionale Workflows ein-/ausschalten — bleibt persistent in den Settings</p>
    </div></div>
    <div class="p-5">

      {# Feature 1: BOM-Kostenkalkulation mit Zukaufteilen #}
      <div class="feature-toggle-row">
        <label class="toggle-switch" title="Zukaufteile in BOM-Kosten einrechnen">
          <input type="hidden" name="setting_feature_bom_purchased_cost" value="0">
          <input type="checkbox" name="setting_feature_bom_purchased_cost" value="1"
                 {% if settings.get('feature_bom_purchased_cost', '1') == '1' %}checked{% endif %}>
          <span class="slider"></span>
        </label>
        <div class="ft-content">
          <div class="ft-title">Zukaufteile in BOM-Kostenkalkulation einrechnen</div>
          <div class="ft-desc">
            Wenn aktiv, wird der Lieferanten-Einkaufspreis aller Zukaufteile (Schrauben,
            Lager, Dichtungen) zur Selbstkosten-Summe der Baugruppe addiert. Sonst werden
            Zukaufteile nur für den Lagerabzug erfasst, fließen aber nicht in den Stück-Preis ein.
          </div>
          <div class="ft-meta">Wirkt sofort auf alle BOM-Anzeigen (/items/&lt;id&gt;/bom)</div>
        </div>
      </div>

      {# Feature 2: Live-Verfügbarkeits-Check im Angebots-Formular #}
      <div class="feature-toggle-row">
        <label class="toggle-switch" title="Verfügbarkeit prüfen bevor Angebot raus geht">
          <input type="hidden" name="setting_feature_quote_availability" value="0">
          <input type="checkbox" name="setting_feature_quote_availability" value="1"
                 {% if settings.get('feature_quote_availability', '1') == '1' %}checked{% endif %}>
          <span class="slider"></span>
        </label>
        <div class="ft-content">
          <div class="ft-title">Live-Verfügbarkeits-Check im Angebots-Formular</div>
          <div class="ft-desc">
            Bei Auswahl eines Kundenteils im Angebot wird sofort geprüft, ob Lager + Produktion
            reichen. Bei Defizit erscheint Warnung + "+ Fertigungsauftrag" Quick-Action.
            Gleiches Verhalten wie im Auftrags-Formular.
          </div>
          <div class="ft-meta">Wirkt auf /quotes/new</div>
        </div>
      </div>

      {# Feature 3: Zukaufteile in BOM-Print #}
      <div class="feature-toggle-row">
        <label class="toggle-switch" title="Zukaufteile im BOM-PDF mit ausdrucken">
          <input type="hidden" name="setting_feature_bom_print_purchased" value="0">
          <input type="checkbox" name="setting_feature_bom_print_purchased" value="1"
                 {% if settings.get('feature_bom_print_purchased', '1') == '1' %}checked{% endif %}>
          <span class="slider"></span>
        </label>
        <div class="ft-content">
          <div class="ft-title">Zukaufteile im BOM-Print (PDF) anzeigen</div>
          <div class="ft-desc">
            Die druckbare Stückliste enthält dann eine zusätzliche Sektion "Zukaufteile / Normalien"
            mit Norm, Hersteller-Nr und Mengen — nützlich für die Werkstatt oder zum Beilegen
            ans Angebot.
          </div>
          <div class="ft-meta">Wirkt auf /items/&lt;id&gt;/bom/print</div>
        </div>
      </div>

      {# v1.12.2 Feature 5: Angebots-Follow-up #}
      <div class="feature-toggle-row">
        <label class="toggle-switch" title="Höfliche Erinnerungs-Mails bei alten Angeboten">
          <input type="hidden" name="setting_feature_quote_followup" value="0">
          <input type="checkbox" name="setting_feature_quote_followup" value="1"
                 {% if settings.get('feature_quote_followup', '0') == '1' %}checked{% endif %}>
          <span class="slider"></span>
        </label>
        <div class="ft-content">
          <div class="ft-title">Angebots-Follow-up Erinnerungs-Mails</div>
          <div class="ft-desc">
            Wenn aktiv: täglich um 9:00 Uhr werden Angebote mit Status „gesendet" geprüft.
            Nach <b>7 Tagen</b> ohne Antwort → höfliche Nachfrage-Mail (Level 1).
            Nach <b>14 Tagen</b> → freundliche 2. Nachfrage (Level 2). Idempotent —
            jedes Level wird max. 1× pro Angebot versendet.
          </div>
          <div class="ft-meta">Voraussetzung: SMTP konfiguriert + Kunden-Email vorhanden</div>
          <div style="margin-top: 6px;">
            <button type="button" class="btn btn-sm btn-secondary" id="test-quote-followup">Jetzt testen</button>
            <span id="test-quote-followup-result" class="text-xs" style="color: var(--card-text-muted); margin-left: 8px;"></span>
          </div>
          <script>
          document.getElementById('test-quote-followup')?.addEventListener('click', () => {
            const out = document.getElementById('test-quote-followup-result');
            out.textContent = '… läuft';
            function getCookie(n) { return document.cookie.split('; ').find(r => r.startsWith(n + '='))?.split('=')[1] || ''; }
            fetch('/api/quotes/send-followups-now', { method: 'POST', headers: {'X-CSRF-Token': getCookie('csrf_token')} })
              .then(r => r.json()).then(d => {
                out.style.color = d.sent > 0 ? '#4ade80' : '#fbbf24';
                out.textContent = (d.sent > 0 ? '✓ ' : 'ℹ ') + d.hint;
              });
          });
          </script>
        </div>
      </div>

      {# v1.12.2 Feature 6: Auto-Lieferschein-Entwurf #}
      <div class="feature-toggle-row">
        <label class="toggle-switch" title="Lieferschein automatisch als Entwurf erzeugen">
          <input type="hidden" name="setting_feature_auto_delivery_note" value="0">
          <input type="checkbox" name="setting_feature_auto_delivery_note" value="1"
                 {% if settings.get('feature_auto_delivery_note', '0') == '1' %}checked{% endif %}>
          <span class="slider"></span>
        </label>
        <div class="ft-content">
          <div class="ft-title">Auto-Lieferschein-Entwurf wenn versandbereit</div>
          <div class="ft-desc">
            Wenn alle Positionen eines Auftrags fertig produziert sind UND der Lagerbestand
            der Kundenteile die Bestellmenge deckt, wird automatisch ein <b>Lieferschein-Entwurf</b>
            erzeugt. Du musst nur noch bestätigen + verschicken. Idempotent: pro Auftrag max. 1
            Auto-Entwurf, dann sperrt der Marker `auto_dn_created_at`.
          </div>
          <div class="ft-meta">Trigger: bei jedem Fertigungs-Job-Done eines Kundenteils</div>
          <div style="margin-top: 6px;">
            <button type="button" class="btn btn-sm btn-secondary" id="test-auto-dn">Jetzt testen</button>
            <span id="test-auto-dn-result" class="text-xs" style="color: var(--card-text-muted); margin-left: 8px;"></span>
          </div>
          <script>
          document.getElementById('test-auto-dn')?.addEventListener('click', () => {
            const out = document.getElementById('test-auto-dn-result');
            out.textContent = '… läuft';
            function getCookie(n) { return document.cookie.split('; ').find(r => r.startsWith(n + '='))?.split('=')[1] || ''; }
            fetch('/api/sales-orders/auto-create-delivery-notes-now', { method: 'POST', headers: {'X-CSRF-Token': getCookie('csrf_token')} })
              .then(r => r.json()).then(d => {
                out.style.color = d.created > 0 ? '#4ade80' : '#fbbf24';
                out.textContent = (d.created > 0 ? '✓ ' : 'ℹ ') + d.hint;
              });
          });
          </script>
        </div>
      </div>

      {# v1.12.2 Feature 7: EDI-Auto-Auftragsanlage #}
      <div class="feature-toggle-row">
        <label class="toggle-switch" title="EDI-Bestellungen automatisch zu Aufträgen wandeln">
          <input type="hidden" name="setting_feature_edi_auto_order" value="0">
          <input type="checkbox" name="setting_feature_edi_auto_order" value="1"
                 {% if settings.get('feature_edi_auto_order', '0') == '1' %}checked{% endif %}>
          <span class="slider"></span>
        </label>
        <div class="ft-content">
          <div class="ft-title">EDI-Auto-Auftragsanlage (Bosch, VDA, Fischer-JSON)</div>
          <div class="ft-desc">
            Eingehende EDI-Bestellungen werden geprüft: ist der Sender als Kunde im Stamm UND
            sind alle Artikel im Stamm vorhanden? → 1-Klick „Als Auftrag übernehmen" Button in
            der EDI-Inbox. Status der EDI-Nachricht wechselt auf <code>converted</code>.
            Bei fehlenden Artikeln → Hinweis mit Liste der zu ergänzenden SKUs.
          </div>
          <div class="ft-meta">EDI-Inbox: <a href="/edi" style="color: var(--brand-orange);">/edi</a></div>
        </div>
      </div>

      {# Feature 4: Tägliche Sammelbestellungs-Mail #}
      <div class="feature-toggle-row">
        <label class="toggle-switch" title="Tägliche Sammelbestellungs-Email an Einkauf">
          <input type="hidden" name="setting_feature_daily_reorder_mail" value="0">
          <input type="checkbox" name="setting_feature_daily_reorder_mail" value="1"
                 {% if settings.get('feature_daily_reorder_mail', '0') == '1' %}checked{% endif %}>
          <span class="slider"></span>
        </label>
        <div class="ft-content">
          <div class="ft-title">Tägliche Sammelbestellungs-Email (08:00 Uhr)</div>
          <div class="ft-desc">
            Wenn aktiv: täglich um 8 Uhr prüft der Scheduler welche Normalien unter Mindestbestand
            sind. Falls ja, wird eine HTML-Mail mit der konsolidierten Liste pro Lieferant an die
            Einkaufs-Adresse versendet (siehe Feld unten). Standard: aus (SMTP-Setup erforderlich).
          </div>
          <div style="margin-top: 8px;">
            <label class="text-[10px] uppercase tracking-wider font-semibold" style="color:var(--card-text-muted);">
              Empfänger-Email für Sammelbestellungs-Mail
            </label>
            <div style="display:flex; gap:8px; align-items:center; margin-top:4px;">
              <input class="input nums" type="email" name="setting_reorder_mail_recipient"
                     value="{{ settings.get('reorder_mail_recipient', '') or '' }}"
                     placeholder="einkauf@deine-firma.de"
                     style="width: 280px;">
              <button type="button" class="btn btn-sm btn-secondary" id="test-reorder-mail"
                      title="Sammelbestellungs-Mail JETZT testweise versenden (Settings vorher speichern)">
                Jetzt testen
              </button>
            </div>
            <p id="test-reorder-mail-result" class="text-xs" style="color:var(--card-text-muted); margin-top:6px; min-height: 1em;"></p>
          </div>
          <script>
          document.getElementById('test-reorder-mail')?.addEventListener('click', () => {
            const out = document.getElementById('test-reorder-mail-result');
            out.textContent = '… läuft';
            function getCookie(n) { return document.cookie.split('; ').find(r => r.startsWith(n + '='))?.split('=')[1] || ''; }
            const csrf = getCookie('csrf_token');
            fetch('/api/purchased-parts/send-reorder-mail-now', {
              method: 'POST',
              headers: { 'X-CSRF-Token': csrf },
            }).then(r => r.json()).then(d => {
              if (d.ok && d.sent) {
                out.style.color = '#4ade80';
                out.textContent = '✓ ' + d.hint;
              } else {
                out.style.color = '#fbbf24';
                out.textContent = 'ℹ ' + (d.hint || d.error || 'übersprungen');
              }
            }).catch(err => {
              out.style.color = '#f87171';
              out.textContent = '✗ Fehler: ' + err;
            });
          });
          </script>
        </div>
      </div>

    </div>
    <div class="px-5 py-4 border-t flex items-center justify-between" style="border-color: var(--card-border-2);">
      <p class="text-xs" style="color:var(--card-text-muted);">
        Speichern via "Einstellungen speichern" Button am Seitenende
      </p>
      <button class="btn btn-primary btn-sm" type="submit">Einstellungen speichern</button>
    </div>
  </div>

  {# ---------- 4b. PERSONAL / HR ---------- #}
  <div class="card" id="hr">
    <div class="card-header"><div>
      <h2>Personal / HR — Defaults &amp; globale Regeln</h2>
      <p class="sub">Vorbelegungen für <strong>neue</strong> Mitarbeiter · individuelle Werte pro Person bearbeiten</p>
    </div></div>
    <div class="alert alert-blue text-sm mx-5 mt-4 mb-0" style="border-left-color:#2563EB;">
      <p class="font-medium" style="color:#1e40af;">Bestehende Mitarbeiter individuell anpassen</p>
      <p class="mt-1 text-neutral-700 text-xs">
        Wenn ein Mitarbeiter nachverhandelt (z.B. mehr Urlaubstage, andere Wochenstunden, Position-Wechsel),
        erfolgt das pro Person in der Personalakte:<br>
        <a href="/team" class="text-blue-600 hover:underline font-medium">Team &amp; Maschinen → Mitarbeiter wählen → "Akte"</a>
        — dort lassen sich Jahresurlaub, Wochenstunden, Eintrittsdatum, Position, Arbeitsverhältnis und Notizen einzeln überschreiben.
      </p>
      <p class="mt-2 text-neutral-700 text-xs">
        Die Werte hier in den Settings sind <strong>nur Vorlage</strong> für neu angelegte Mitarbeiter — bestehende werden nicht überschrieben.
      </p>
    </div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Default Jahresurlaub (Tage)</label>
        <input class="input mt-1 w-full nums" type="number" name="setting_hr_default_vacation_days"
               value="{{ settings.get('hr_default_vacation_days', '30') or '30' }}" min="0" max="60">
        <p class="text-[11px] text-neutral-500 mt-1">Wird beim Anlegen neuer Mitarbeiter vorbelegt</p>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Wochenarbeitszeit Standard (h)</label>
        <input class="input mt-1 w-full nums" type="number" step="0.5" name="setting_hr_default_weekly_hours"
               value="{{ settings.get('hr_default_weekly_hours', '40') or '40' }}" min="0" max="60">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Arbeitstage pro Woche</label>
        <select class="select mt-1 w-full" name="setting_hr_workdays">
          {% for n in ["5","6","4"] %}
            <option value="{{ n }}" {% if settings.get('hr_workdays', '5') == n %}selected{% endif %}>{{ n }} Tage (Mo–{% if n=="5" %}Fr{% elif n=="6" %}Sa{% else %}Do{% endif %})</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bundesland (für Feiertage)</label>
        <select class="select mt-1 w-full" name="setting_hr_state">
          {% for code, label in [("NW","Nordrhein-Westfalen"),("BY","Bayern"),("BW","Baden-Württemberg"),("HE","Hessen"),("NI","Niedersachsen"),("SN","Sachsen"),("BE","Berlin"),("BB","Brandenburg"),("HH","Hamburg"),("HB","Bremen"),("MV","Mecklenburg-Vorpommern"),("RP","Rheinland-Pfalz"),("SH","Schleswig-Holstein"),("SL","Saarland"),("ST","Sachsen-Anhalt"),("TH","Thüringen")] %}
            <option value="{{ code }}" {% if settings.get('hr_state', 'NW') == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Feiertage (kommagetrennt, ISO-Datum)</label>
        <textarea class="input mt-1 w-full font-mono text-xs" rows="3" name="setting_hr_holidays"
                  placeholder="2026-01-01, 2026-04-03, 2026-04-06, 2026-05-01, 2026-12-25, 2026-12-26">{{ settings.get('hr_holidays', '') or '' }}</textarea>
        <p class="text-[11px] text-neutral-500 mt-1">Werden bei der Werktag-Zählung im Urlaubsantrag abgezogen</p>
      </div>
      <label class="flex items-center gap-2 text-sm col-span-2">
        <input type="checkbox" name="setting_hr_auto_carryover" value="1" {% if settings.get('hr_auto_carryover') == '1' %}checked{% endif %}>
        Resturlaub automatisch ins Folgejahr übertragen
      </label>
      <label class="flex items-center gap-2 text-sm col-span-2">
        <input type="checkbox" name="setting_hr_overtime_track" value="1" {% if settings.get('hr_overtime_track') == '1' %}checked{% endif %}>
        Überstunden aus Zeiterfassung erfassen
      </label>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Genehmiger-Mail (Urlaubsanträge)</label>
        <input class="input mt-1 w-full" type="email" name="setting_hr_approver_mail"
               value="{{ settings.get('hr_approver_mail', '') or '' }}" placeholder="personal@firma.de">
      </div>
    </div>
  </div>

  {# ---------- 4c. FORMULAR-VERWALTUNG (Messprotokolle) ---------- #}
  <div class="card" id="forms">
    <div class="card-header"><div>
      <h2>Formular-Verwaltung — Messprotokolle</h2>
      <p class="sub">Vorlagen für Bauteil-Messungen mit Soll-Werten und Toleranzen</p>
    </div></div>
    <div class="p-5 space-y-3">
      <p class="text-sm text-neutral-700">
        Mess-Vorlagen definieren <strong>welche Maße</strong> bei einem Bauteil gemessen werden, mit
        <strong>Soll-Wert</strong>, <strong>Toleranz oben/unten</strong> und <strong>Einheit</strong>.
        Daraus werden bei der Erfassung automatisch i.O. / n.i.O.-Bewertungen erzeugt.
      </p>
      <div class="flex items-center gap-3 pt-2">
        <a class="btn btn-primary" href="/measurements">
          <svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
          Zur Vorlagen-Verwaltung
        </a>
        <a class="btn btn-secondary" href="/measurements/templates/new">+ Neue Vorlage anlegen</a>
      </div>
      <p class="text-[11px] text-neutral-500 pt-2 border-t border-neutral-100">
        Bestehende Vorlagen lassen sich dort bearbeiten oder löschen — Messungen werden direkt aus dem Bereich erfasst.
      </p>
    </div>
  </div>

  {# ---------- 5. KALIBRIERUNG & PRÜFMITTEL ---------- #}
  <div class="card" id="calib">
    <div class="card-header"><div>
      <h2>Kalibrierung & Prüfmittel</h2>
      <p class="sub">DGUV V3, ISO 9001, Messmittel-Überwachung</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Default Kalibrier-Intervall (Monate)</label>
        <input class="input mt-1 w-full nums" type="number" name="setting_calib_default_interval_months" value="{{ settings.get('calib_default_interval_months', '12') or '12' }}" min="1">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Warnung X Tage vor Fälligkeit</label>
        <input class="input mt-1 w-full nums" type="number" name="setting_calib_warn_days" value="{{ settings.get('calib_warn_days', '30') or '30' }}" min="1">
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Empfänger Kalibrier-Warnungen</label>
        <input class="input mt-1 w-full" type="email" name="setting_calib_warn_email" value="{{ settings.get('calib_warn_email', '') or '' }}" placeholder="qs@firma.de">
      </div>
      <label class="flex items-center gap-2 text-sm col-span-2">
        <input type="checkbox" name="setting_calib_block_on_overdue" value="1" {% if settings.get('calib_block_on_overdue') == '1' %}checked{% endif %}>
        Ausleihe sperren wenn Kalibrierung überfällig
      </label>
    </div>
  </div>

  {# ---------- 6. E-MAIL-TEMPLATES ---------- #}
  <div class="card" id="emailtpl">
    <div class="card-header"><div>
      <h2>E-Mail-Templates</h2>
      <p class="sub">Platzhalter: <code class="text-blue-400">{{ '{{user}}' }}</code> · <code class="text-blue-400">{{ '{{tool}}' }}</code> · <code class="text-blue-400">{{ '{{order}}' }}</code> · <code class="text-blue-400">{{ '{{date}}' }}</code> · <code class="text-blue-400">{{ '{{company}}' }}</code></p>
    </div></div>
    <div class="p-5 space-y-5">
      {% for label, key, default in [
        ("Werkzeugausgabe-Bestätigung", "tpl_rental_confirm",
         "Hallo {{user}},\n\nwir bestätigen die Ausleihe von {{tool}}.\n\nViele Grüße,\n{{company}}"),
        ("Rückgabe-Erinnerung", "tpl_return_reminder",
         "Hallo {{user}},\n\nbitte denken Sie an die Rückgabe von {{tool}}.\n\nViele Grüße,\n{{company}}"),
        ("Mahnung Werkzeug überfällig", "tpl_overdue",
         "Hallo {{user}},\n\n{{tool}} ist seit {{date}} überfällig.\n\nViele Grüße,\n{{company}}"),
        ("Bestand-Warnung an Lager", "tpl_stock_warning",
         "Mindestbestand für {{tool}} unterschritten."),
        ("Bestellbestätigung an Lieferant", "tpl_order_to_vendor",
         "Sehr geehrte Damen und Herren,\n\nim Anhang unsere Bestellung {{order}}.\n\nMit freundlichen Grüßen\n{{company}}"),
      ] %}
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">{{ label }}</label>
        <textarea class="input mt-1 w-full font-mono text-xs" rows="4" name="setting_{{ key }}">{{ settings.get(key, default) or default }}</textarea>
      </div>
      {% endfor %}
    </div>
  </div>

  {# ---------- 7. PDF-VORLAGE ---------- #}
  <div class="card" id="pdf">
    <div class="card-header"><div>
      <h2>PDF-Vorlage</h2>
      <p class="sub">Layout für Bestellungen, Lieferscheine und Rechnungen</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      <label class="flex items-center gap-2 text-sm col-span-2">
        <input type="checkbox" name="setting_pdf_use_letterhead" value="1" {% if settings.get('pdf_use_letterhead', '1') == '1' %}checked{% endif %}>
        Briefpapier (PDF-Hintergrund) verwenden
      </label>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Margin oben (mm)</label>
        <input class="input mt-1 w-full nums" type="number" name="setting_pdf_margin_top" value="{{ settings.get('pdf_margin_top', '75') or '75' }}" min="0">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Margin unten (mm)</label>
        <input class="input mt-1 w-full nums" type="number" name="setting_pdf_margin_bottom" value="{{ settings.get('pdf_margin_bottom', '50') or '50' }}" min="0">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Margin links (mm)</label>
        <input class="input mt-1 w-full nums" type="number" name="setting_pdf_margin_left" value="{{ settings.get('pdf_margin_left', '22') or '22' }}" min="0">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Margin rechts (mm)</label>
        <input class="input mt-1 w-full nums" type="number" name="setting_pdf_margin_right" value="{{ settings.get('pdf_margin_right', '22') or '22' }}" min="0">
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bestellschein-Footer-Text</label>
        <textarea class="input mt-1 w-full" rows="2" name="setting_pdf_order_footer">{{ settings.get('pdf_order_footer', 'Bitte bestätigen Sie den Eingang dieser Bestellung mit Liefertermin.') or 'Bitte bestätigen Sie den Eingang dieser Bestellung mit Liefertermin.' }}</textarea>
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">AGB / Konditionen (kommt unter jede Bestellung)</label>
        <textarea class="input mt-1 w-full" rows="3" name="setting_pdf_terms">{{ settings.get('pdf_terms', '') or '' }}</textarea>
      </div>
    </div>
  </div>

  {# ---------- 8. SMTP / E-MAIL-VERSAND ---------- #}
  <div class="card" id="smtp">
    <div class="card-header"><div>
      <h2>E-Mail-Versand (SMTP)</h2>
      <p class="sub">Postausgangsserver für automatische Mails</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">SMTP-Host</label>
        <input class="input mt-1 w-full" type="text" name="setting_smtp_host" value="{{ settings.get('smtp_host', '') or '' }}" placeholder="mail.firma.de">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Port</label>
        <input class="input mt-1 w-full nums" type="number" name="setting_smtp_port" value="{{ settings.get('smtp_port', '587') or '587' }}">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Benutzer</label>
        <input class="input mt-1 w-full" type="text" name="setting_smtp_user" value="{{ settings.get('smtp_user', '') or '' }}">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Passwort</label>
        <input class="input mt-1 w-full" type="password" name="setting_smtp_pass" value="" placeholder="{% if settings.get('smtp_pass') %}(gesetzt — leer lassen behält Wert){% else %}SMTP-Passwort{% endif %}" autocomplete="new-password">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Verschlüsselung</label>
        <select class="select mt-1 w-full" name="setting_smtp_encryption">
          {% for code, label in [("starttls","STARTTLS"),("ssl","SSL/TLS"),("none","Keine")] %}
            <option value="{{ code }}" {% if settings.get('smtp_encryption', 'starttls') == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Absender-Adresse</label>
        <input class="input mt-1 w-full" type="email" name="setting_smtp_from" value="{{ settings.get('smtp_from', '') or '' }}">
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">BCC-Archiv (Kopie an)</label>
        <input class="input mt-1 w-full" type="email" name="setting_smtp_bcc" value="{{ settings.get('smtp_bcc', '') or '' }}" placeholder="archiv@firma.de">
      </div>
    </div>

    <!-- Test-Mail Block (außerhalb des Settings-Forms — eigener POST!) -->
    <div id="mail-test" class="px-5 pb-5 border-t border-neutral-100 pt-4">
      <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500 mb-2">Verbindung testen</p>
      {% set mail_flag = request.query_params.get('mail') %}
      {% if mail_flag == 'ok' %}
      <div class="alert alert-blue text-sm mb-3" style="border-left-color:#10b981;">
        <p class="font-medium" style="color:#047857;">✓ Test-Mail erfolgreich versendet</p>
        <p class="text-xs text-neutral-600 mt-1">{{ request.query_params.get('info', '')[:200] }}</p>
      </div>
      {% elif mail_flag == 'fail' %}
      <div class="alert alert-red text-sm mb-3">
        <p class="font-medium text-red-700">✗ Versand fehlgeschlagen</p>
        <p class="text-xs text-neutral-600 mt-1 font-mono break-all">{{ request.query_params.get('info', '')[:200] }}</p>
      </div>
      {% endif %}
      <p class="text-xs text-neutral-600 mb-2">
        Status: {% if mail_configured %}<span class="badge badge-emerald">SMTP konfiguriert</span>{% else %}<span class="badge badge-amber">SMTP nicht konfiguriert — oben Host + Absender eintragen + speichern</span>{% endif %}
      </p>
      <!-- Lives inside the parent /settings form (no nested forms in HTML).
           The button overrides the action via `formaction` so clicking it
           POSTs to /settings/test-mail with ALL current SMTP fields —
           the route saves them, then attempts the test send. -->
      <div class="flex items-center gap-2">
        <input class="input flex-1" type="email" name="setting_test_mail_recipient" required
               value="{{ settings.get('hr_approver_mail', '') or settings.get('company_mail', '') or '' }}"
               placeholder="empfaenger@firma.de">
        <button class="btn btn-secondary btn-sm" type="submit"
                formaction="/settings/test-mail" formmethod="post"
                formnovalidate>
          Test-Mail senden
        </button>
      </div>
      <p class="text-[11px] text-neutral-500 mt-2">
        Speichert alle SMTP-Felder oben &amp; sendet sofort eine Test-Mail.
      </p>
    </div>
  </div>

  {# ---------- 8b. MAIL-LOG ---------- #}
  {% if mail_log %}
  <div class="card">
    <div class="card-header"><div>
      <h2>Mail-Versand-Log</h2>
      <p class="sub">Letzte {{ mail_log|length }} Versandversuche (Audit-Trail)</p>
    </div></div>
    <table class="data-table">
      <thead>
        <tr><th>Zeit</th><th>Status</th><th>Empfänger</th><th>Betreff</th><th>Info</th></tr>
      </thead>
      <tbody>
        {% for m in mail_log %}
        <tr>
          <td class="nums text-xs">{{ m.created_at[:16] }}</td>
          <td>
            {% if m.ok %}<span class="badge badge-emerald">OK</span>
            {% else %}<span class="badge badge-red">Fehler</span>{% endif %}
          </td>
          <td class="text-xs nums">{{ m.recipients }}</td>
          <td class="text-xs truncate" style="max-width:300px;">{{ m.subject }}</td>
          <td class="text-[11px] text-neutral-500 truncate font-mono" style="max-width:280px;">{{ m.info }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}

  {# ---------- 9. BENACHRICHTIGUNGEN ---------- #}
  <div class="card" id="notify">
    <div class="card-header"><div>
      <h2>Benachrichtigungen</h2>
      <p class="sub">Wer wird wann informiert</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bestell-Mail-Empfänger</label>
        <input class="input mt-1 w-full" type="email" name="setting_global_order_mail" value="{{ settings.get('global_order_mail', '') or '' }}" placeholder="bestellung@firma.de">
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bestand-Warnungs-Mail</label>
        <input class="input mt-1 w-full" type="email" name="setting_global_stockerror_mail" value="{{ settings.get('global_stockerror_mail', '') or '' }}" placeholder="lager@firma.de">
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Slack/Teams Webhook-URL (optional)</label>
        <input class="input mt-1 w-full" type="url" name="setting_webhook_url" value="{{ settings.get('webhook_url', '') or '' }}" placeholder="https://hooks.slack.com/...">
      </div>
      <label class="flex items-center gap-2 text-sm">
        <input type="checkbox" name="setting_notify_low_stock" value="1" {% if settings.get('notify_low_stock', '1') == '1' %}checked{% endif %}>
        Mindestbestand
      </label>
      <label class="flex items-center gap-2 text-sm">
        <input type="checkbox" name="setting_notify_calib_due" value="1" {% if settings.get('notify_calib_due', '1') == '1' %}checked{% endif %}>
        Kalibrierung fällig
      </label>
      <label class="flex items-center gap-2 text-sm">
        <input type="checkbox" name="setting_notify_overdue_rental" value="1" {% if settings.get('notify_overdue_rental', '1') == '1' %}checked{% endif %}>
        Werkzeug überfällig
      </label>
      <label class="flex items-center gap-2 text-sm">
        <input type="checkbox" name="setting_notify_order_received" value="1" {% if settings.get('notify_order_received', '0') == '1' %}checked{% endif %}>
        Wareneingang
      </label>

      <div class="col-span-2 mt-4 pt-4 border-t" style="border-color: var(--card-border-2);">
        <p class="text-[11px] uppercase tracking-wider font-bold mb-2" style="color: var(--brand-blue-light);">
          Tägliche Reminder-Mail
        </p>
        <p class="text-[10px] mb-3" style="color: var(--card-text-muted);">
          Einmal pro Tag eine Sammelmail mit überfälligen Prüfungen, ablaufenden Zertifikaten und fälliger Inventur.
        </p>
      </div>
      <label class="flex items-center gap-2 text-sm">
        <input type="checkbox" name="setting_reminder_enabled" value="1"
               {% if settings.get('reminder_enabled', '1') == '1' %}checked{% endif %}>
        Tagesreminder aktiv
      </label>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Versand-Uhrzeit</label>
        <input class="input mt-1 w-full nums" type="number" min="0" max="23"
               name="setting_reminder_send_hour"
               value="{{ settings.get('reminder_send_hour', '7') or '7' }}">
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Empfänger (E-Mail)</label>
        <input class="input mt-1 w-full" type="email" name="setting_reminder_email"
               value="{{ settings.get('reminder_email', '') or '' }}"
               placeholder="z.B. werkstatt@firma.de — leer = SMTP-Absender wird verwendet">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Inventur-Intervall (Tage)</label>
        <input class="input mt-1 w-full nums" type="number" min="30"
               name="setting_inventur_interval_days"
               value="{{ settings.get('inventur_interval_days', '365') or '365' }}">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Letzte Inventur</label>
        <input class="input mt-1 w-full nums" type="date"
               name="setting_inventur_last_done"
               value="{{ settings.get('inventur_last_done', '') or '' }}">
      </div>
      <div class="col-span-2">
        <button type="button" class="btn btn-secondary"
                onclick="event.preventDefault();
                  fetch('/api/workflow/send-reminders', {method:'POST'})
                    .then(r => r.json())
                    .then(d => {
                      if (d.ok) alert('Reminder-Mail wurde versandt: ' + d.sent + ' E-Mail(s)');
                      else alert('Fehler: ' + (d.error || 'unbekannt'));
                    });">
          Reminder-Mail jetzt senden (Test)
        </button>
      </div>
    </div>
  </div>

  {# ---------- 10. KIOSK / SHOPFLOOR-MODUS ---------- #}
  <div class="card" id="kiosk">
    <div class="card-header"><div>
      <h2>Kiosk-Modus (Shopfloor-Terminal)</h2>
      <p class="sub">Vereinfachtes UI für Werkstatt-Tablet oder Touchscreen</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      <label class="flex items-center gap-2 text-sm col-span-2">
        <input type="checkbox" name="setting_kiosk_enabled" value="1" {% if settings.get('kiosk_enabled') == '1' %}checked{% endif %}>
        Kiosk-Modus aktivieren (große Buttons, kein Sidebar, automatischer Logout)
      </label>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Auto-Logout nach (Sekunden)</label>
        <input class="input mt-1 w-full nums" type="number" name="setting_kiosk_logout_seconds" value="{{ settings.get('kiosk_logout_seconds', '120') or '120' }}" min="10">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Eingabe</label>
        <select class="select mt-1 w-full" name="setting_kiosk_input">
          {% for code, label in [("touch","Touch (große Buttons)"),("scanner","Barcode-Scanner only"),("hybrid","Touch + Scanner")] %}
            <option value="{{ code }}" {% if settings.get('kiosk_input', 'touch') == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <label class="flex items-center gap-2 text-sm">
        <input type="checkbox" name="setting_kiosk_signature" value="1" {% if settings.get('kiosk_signature') == '1' %}checked{% endif %}>
        Unterschrift bei Rückgabe verlangen
      </label>
      <label class="flex items-center gap-2 text-sm">
        <input type="checkbox" name="setting_kiosk_photo" value="1" {% if settings.get('kiosk_photo') == '1' %}checked{% endif %}>
        Foto bei Beschädigung erfassen
      </label>
    </div>
  </div>

  {# ---------- 10.5 SICHERHEIT (2FA + Passwort-Policy + Rate-Limit) ---------- #}
  <div class="card" id="security">
    <div class="card-header"><div>
      <h2>Sicherheit</h2>
      <p class="sub">Zwei-Faktor-Authentifizierung · Passwort-Policy · Login-Rate-Limit</p>
    </div></div>
    <div class="p-5 flex items-center justify-between gap-4 border-b" style="border-color: var(--card-border-2);">
      <div>
        <p class="text-sm font-semibold">Zwei-Faktor-Authentifizierung (TOTP)</p>
        <p class="text-xs mt-1" style="color: var(--card-text-muted);">
          Empfehlung für alle Konten mit Zugriff auf Rechnungen oder Stammdaten.
        </p>
      </div>
      <a class="btn btn-secondary" href="/settings/2fa">2FA verwalten</a>
    </div>
    <div class="p-5 flex items-center justify-between gap-4 border-b" style="border-color: var(--card-border-2);">
      <div>
        <p class="text-sm font-semibold">Aktive Sitzungen</p>
        <p class="text-xs mt-1" style="color: var(--card-text-muted);">
          „Wo bin ich überall eingeloggt?" — bei Verlust eines Geräts alle Sessions auf einmal beenden.
        </p>
      </div>
      <a class="btn btn-secondary" href="/settings/sessions">Sitzungen ansehen</a>
    </div>
    <div class="p-5 flex items-center justify-between gap-4 border-b" style="border-color: var(--card-border-2);">
      <div>
        <p class="text-sm font-semibold">AGB &amp; Lizenzbedingungen</p>
        <p class="text-xs mt-1" style="color: var(--card-text-muted);">
          Aktuelle Version + Akzeptanz-Status (welche Version wurde beim Setup akzeptiert).
        </p>
      </div>
      <a class="btn btn-secondary" href="/agb">AGB ansehen</a>
    </div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4 border-b" style="border-color: var(--card-border-2);">
      <div class="col-span-2">
        <p class="text-[11px] uppercase tracking-wider font-bold mb-1" style="color: var(--brand-blue-light);">SSO via OpenID Connect</p>
        <p class="text-[10px]" style="color: var(--card-text-muted);">
          Wenn aktiviert: User mit E-Mail-Match im OIDC-Provider können sich ohne Passwort einloggen.
          Login via <code>/sso/login</code>.
        </p>
      </div>
      <label class="flex items-center gap-2 text-sm col-span-2">
        <input type="checkbox" name="setting_sso_enabled" value="1"
               {% if settings.get('sso_enabled', '0') == '1' %}checked{% endif %}>
        SSO aktiv
      </label>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Provider-URL (Issuer)</label>
        <input class="input mt-1 w-full nums" type="url" name="setting_sso_provider_url"
               value="{{ settings.get('sso_provider_url', '') or '' }}"
               placeholder="z.B. https://accounts.google.com">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Client-ID</label>
        <input class="input mt-1 w-full nums" type="text" name="setting_sso_client_id"
               value="{{ settings.get('sso_client_id', '') or '' }}">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Client-Secret</label>
        <input class="input mt-1 w-full nums" type="password" name="setting_sso_client_secret"
               value="{{ settings.get('sso_client_secret', '') or '' }}"
               autocomplete="new-password">
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Callback-URL</label>
        <input class="input mt-1 w-full nums" type="url" name="setting_sso_callback_url"
               value="{{ settings.get('sso_callback_url', '') or '' }}"
               placeholder="https://takoma.firma.de/sso/callback">
      </div>
    </div>
    <div class="p-5 flex items-center justify-between gap-4 border-b" style="border-color: var(--card-border-2);">
      <div>
        <p class="text-sm font-semibold">Workflow-Regeln</p>
        <p class="text-xs mt-1" style="color: var(--card-text-muted);">
          Trigger-Aktion-Regeln (z.B. „Rechnung 14 T überfällig → Mahnung 1 + Mail").
        </p>
      </div>
      <a class="btn btn-secondary" href="/settings/workflows">Workflows verwalten</a>
    </div>
    <div class="p-5 flex items-center justify-between gap-4 border-b" style="border-color: var(--card-border-2);">
      <div>
        <p class="text-sm font-semibold">EZB-Tageskurse</p>
        <p class="text-xs mt-1" style="color: var(--card-text-muted);">
          Mehrwährungs-Support — Konvertierung anhand der EZB-Daily-Rates.
        </p>
      </div>
      <a class="btn btn-secondary" href="/settings/currencies">Währungen ansehen</a>
    </div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      <div class="col-span-2">
        <p class="text-[11px] uppercase tracking-wider font-bold mb-1" style="color: var(--brand-blue-light);">Passwort-Policy</p>
        <p class="text-[10px]" style="color: var(--card-text-muted);">Wird bei „Passwort ändern" geprüft. Greift nicht in bestehende Passwörter ein.</p>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Mindestlänge</label>
        <input class="input mt-1 w-full nums" type="number" min="6" max="64"
               name="setting_pw_min_length"
               value="{{ settings.get('pw_min_length', '10') or '10' }}">
      </div>
      <div class="flex items-end gap-4 flex-wrap">
        <label class="flex items-center gap-2 text-sm">
          <input type="checkbox" name="setting_pw_require_digit" value="1"
                 {% if settings.get('pw_require_digit', '1') == '1' %}checked{% endif %}>
          Ziffer
        </label>
        <label class="flex items-center gap-2 text-sm">
          <input type="checkbox" name="setting_pw_require_upper" value="1"
                 {% if settings.get('pw_require_upper', '1') == '1' %}checked{% endif %}>
          Großbuchstabe
        </label>
        <label class="flex items-center gap-2 text-sm">
          <input type="checkbox" name="setting_pw_require_special" value="1"
                 {% if settings.get('pw_require_special', '0') == '1' %}checked{% endif %}>
          Sonderzeichen
        </label>
      </div>

      <div class="col-span-2 mt-4 pt-4 border-t" style="border-color: var(--card-border-2);">
        <p class="text-[11px] uppercase tracking-wider font-bold mb-1" style="color: var(--brand-blue-light);">Login-Rate-Limit</p>
        <p class="text-[10px]" style="color: var(--card-text-muted);">
          Nach N Fehlversuchen wird das Konto temporär gesperrt — schützt gegen Brute-Force.
        </p>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Schwelle (Fehlversuche)</label>
        <input class="input mt-1 w-full nums" type="number" min="3" max="20"
               name="setting_pw_lockout_threshold"
               value="{{ settings.get('pw_lockout_threshold', '5') or '5' }}">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Sperrdauer (Minuten)</label>
        <input class="input mt-1 w-full nums" type="number" min="1" max="120"
               name="setting_pw_lockout_minutes"
               value="{{ settings.get('pw_lockout_minutes', '5') or '5' }}">
      </div>
    </div>
  </div>

  {# ---------- 11. AUDIT-LOG ---------- #}
  <div class="card" id="audit">
    <div class="card-header"><div>
      <h2>Audit-Log</h2>
      <p class="sub">Wer hat wann was geändert — Compliance, Diebstahlschutz</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Log-Level</label>
        <select class="select mt-1 w-full" name="setting_audit_level">
          {% for code, label in [("changes","Nur Änderungen (Empfehlung)"),("all","Alle Aktionen inkl. Lesezugriffe"),("off","Aus")] %}
            <option value="{{ code }}" {% if settings.get('audit_level', 'changes') == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Aufbewahrungszeit (Tage)</label>
        <input class="input mt-1 w-full nums" type="number" name="setting_audit_retention_days" value="{{ settings.get('audit_retention_days', '730') or '730' }}" min="30">
      </div>
      <label class="flex items-center gap-2 text-sm col-span-2">
        <input type="checkbox" name="setting_audit_immutable" value="1" {% if settings.get('audit_immutable', '1') == '1' %}checked{% endif %}>
        Logs unveränderlich (GoBD-konform — kein Löschen, nur Anonymisieren)
      </label>
    </div>
  </div>

  {# ---------- 12. DATENSICHERUNG ---------- #}
  <div class="card" id="backup">
    <div class="card-header"><div>
      <h2>Datensicherung</h2>
      <p class="sub">Vollständigen Snapshot der unified.db herunterladen oder Auto-Backup einrichten</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Auto-Backup-Intervall</label>
        <select class="select mt-1 w-full" name="setting_backup_schedule">
          {% for code, label in [("off","Aus"),("daily","Täglich"),("weekly","Wöchentlich")] %}
            <option value="{{ code }}" {% if settings.get('backup_schedule', 'off') == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Aufbewahrung (Anzahl Backups)</label>
        <input class="input mt-1 w-full nums" type="number" name="setting_backup_retention" value="{{ settings.get('backup_retention', '14') or '14' }}" min="1">
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Backup-Pfad (lokal oder SMB)</label>
        <input class="input mt-1 w-full" type="text" name="setting_backup_path" value="{{ settings.get('backup_path', '') or '' }}" placeholder="/Volumes/Backup/takoma oder smb://nas/backup">
      </div>
      <div class="col-span-2">
        <a class="btn btn-secondary" href="/export/backup.db">
          <svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          Backup jetzt herunterladen
        </a>
      </div>
    </div>
  </div>

  {# ---------- 13. CNC-MASCHINEN-ANBINDUNG ---------- #}
  <div class="card" id="machines">
    <div class="card-header"><div>
      <h2>Maschinen-Anbindung (CNC-Steuerungen)</h2>
      <p class="sub">DMG Mori, Hwacheon, Mazak, Hermle — mit Fanuc / Siemens SINUMERIK / Heidenhain TNC</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      <label class="flex items-center gap-2 text-sm col-span-2">
        <input type="checkbox" name="setting_machines_enabled" value="1" {% if settings.get('machines_enabled') == '1' %}checked{% endif %}>
        Maschinenanbindung aktivieren (Stückzahl-Auto-Rückmeldung, Live-Status)
      </label>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Standard-Protokoll</label>
        <select class="select mt-1 w-full" name="setting_machines_default_protocol">
          {% for code, label in [
            ("opcua","OPC UA — empfohlen für Siemens / Heidenhain"),
            ("mtconnect","MTConnect — CNC-Industriestandard"),
            ("focas","Fanuc FOCAS"),
            ("umati","umati (OPC UA Companion für Werkzeugmaschinen)"),
            ("dnc","DNC (klassisch)"),
            ("modbus","Modbus TCP"),
            ("mqtt","MQTT (Edge-Gateway)"),
          ] %}
            <option value="{{ code }}" {% if settings.get('machines_default_protocol','opcua') == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Polling-Intervall (Sekunden)</label>
        <input class="input mt-1 w-full nums" type="number" name="setting_machines_poll_seconds"
               value="{{ settings.get('machines_poll_seconds', '5') or '5' }}" min="1" max="3600">
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">OPC-UA Server-URL (für Heidenhain / Siemens, optional zentral)</label>
        <input class="input mt-1 w-full font-mono text-xs" type="text" name="setting_opcua_server"
               value="{{ settings.get('opcua_server', '') or '' }}"
               placeholder="opc.tcp://opc-server.werkstatt.local:4840">
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">MTConnect-Adapter Basis-URL</label>
        <input class="input mt-1 w-full font-mono text-xs" type="text" name="setting_mtconnect_base"
               value="{{ settings.get('mtconnect_base', '') or '' }}"
               placeholder="http://mtconnect.werkstatt.local:5000/agent">
      </div>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Fanuc FOCAS Library Path (für Fanuc-Steuerungen)</label>
        <input class="input mt-1 w-full font-mono text-xs" type="text" name="setting_focas_lib"
               value="{{ settings.get('focas_lib', '') or '' }}"
               placeholder="C:\\fanuc\\Fwlib32.dll  oder  /usr/local/lib/libfwlib32.so">
      </div>

      <label class="flex items-center gap-2 text-sm col-span-2 pt-2 border-t border-neutral-100">
        <input type="checkbox" name="setting_machines_auto_qty" value="1" {% if settings.get('machines_auto_qty') == '1' %}checked{% endif %}>
        Stückzahl automatisch von Maschine ins Aktions-Dashboard übernehmen
      </label>
      <label class="flex items-center gap-2 text-sm col-span-2">
        <input type="checkbox" name="setting_machines_auto_alarm" value="1" {% if settings.get('machines_auto_alarm') == '1' %}checked{% endif %}>
        Bei Maschinen-Alarm automatisch Mail an Wartung senden
      </label>
      <label class="flex items-center gap-2 text-sm col-span-2">
        <input type="checkbox" name="setting_machines_tool_wear" value="1" {% if settings.get('machines_tool_wear') == '1' %}checked{% endif %}>
        Werkzeugverschleiß aus Steuerung lesen → Auto-Bestellung
      </label>
    </div>
    <div class="alert alert-blue mx-5 mb-4 text-xs">
      <p class="font-medium">Per-Maschine konfigurieren</p>
      <p class="text-neutral-600 mt-1">
        IP-Adresse, Steuerungs-Modell und Protokoll-Endpoint einzeln je Maschine in
        <a href="/team" class="text-blue-600 hover:underline">Team &amp; Maschinen → Maschine bearbeiten</a> setzen.
      </p>
    </div>
  </div>

  {# ---------- 14. REST-API & EXPORTE ---------- #}
  <div class="card" id="api">
    <div class="card-header"><div>
      <h2>REST-API &amp; Daten-Exporte</h2>
      <p class="sub">Externe Tools anbinden — Scanner-Apps, DATEV, BI-Tools</p>
    </div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      <label class="flex items-center gap-2 text-sm col-span-2">
        <input type="checkbox" name="setting_api_enabled" value="1" {% if settings.get('api_enabled') == '1' %}checked{% endif %}>
        REST-API aktivieren
      </label>
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">API-Token</label>
        <input class="input mt-1 w-full font-mono text-xs" type="text" name="setting_api_token" value="{{ settings.get('api_token', '') or '' }}" placeholder="(noch keiner generiert — Token in API-Setup-Seite generieren)">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">DATEV-Export-Format</label>
        <select class="select mt-1 w-full" name="setting_datev_format">
          {% for code, label in [("none","Aus"),("csv","DATEV CSV"),("xml","DATEV XML")] %}
            <option value="{{ code }}" {% if settings.get('datev_format', 'none') == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Scanner-App</label>
        <select class="select mt-1 w-full" name="setting_scanner_app">
          {% for code, label in [("none","Keine"),("native","Eigene App (geplant)"),("zebra","Zebra DataWedge"),("honeywell","Honeywell")] %}
            <option value="{{ code }}" {% if settings.get('scanner_app', 'none') == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>

      {# ---------- INBOUND WEBHOOKS für Webformular / E-Mail-Bot ---------- #}
      <div class="col-span-2 pt-4 border-t mt-2" style="border-color: var(--card-border-2);">
        <h3 style="font-family:'Cy','Inter',sans-serif; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color: rgb(30, 58, 138);">Inbound-Webhooks</h3>
        <p class="text-[11px] text-neutral-500 mt-1">Externe Systeme (Webformular, E-Mail-Parser) können Anfragen und Bestellungen direkt einliefern. Authentifizierung über den API-Token oben.</p>

        <div class="mt-4 p-3 rounded-md font-mono text-[11px]" style="background:#0f172a; color:#e5e5e5; overflow-x:auto;">
          <div style="color:#10b981;">▸ Anfrage einliefern (mit Artikel-Positionen + Zeichnungen)</div>
          <pre style="white-space:pre; margin:6px 0 0; font-family:inherit;">curl -X POST {{ request.base_url|string|trim('/') }}/api/inbound/inquiry \
  -H "Authorization: Bearer {{ settings.get('api_token', 'YOUR_TOKEN') }}" \
  -H "Content-Type: application/json" \
  -d '{
    "customer": {
      "name": "Schmid Werkzeugbau GmbH",
      "email": "einkauf@schmid-wzb.at",
      "country_iso": "AT",
      "vat_id": "ATU99887766"
    },
    "subject": "Anfrage Drehteile Stahl 1.4571",
    "body": "Hallo Takoma, wir benötigen 50 Stk nach Zg-4711.",
    "source": "web",
    "items": [
      {"description": "Drehteil Zg-4711", "qty": 50, "unit": "Stk", "item_code": "ZG-4711"}
    ],
    "attachments": [
      {"filename": "zeichnung.pdf", "url": "https://kunde.de/files/zeichnung.pdf"}
    ]
  }'</pre>
        </div>

        <div class="mt-3 p-3 rounded-md font-mono text-[11px]" style="background:#0f172a; color:#e5e5e5; overflow-x:auto;">
          <div style="color:#E85D2F;">▸ Bestellung direkt als Auftrag anlegen</div>
          <pre style="white-space:pre; margin:6px 0 0; font-family:inherit;">curl -X POST {{ request.base_url|string|trim('/') }}/api/inbound/order \
  -H "Authorization: Bearer {{ settings.get('api_token', 'YOUR_TOKEN') }}" \
  -H "Content-Type: application/json" \
  -d '{
    "customer": {"name": "Beispiel GmbH", "email": "einkauf@beispiel.de"},
    "customer_reference": "PO-12345",
    "due_date": "2026-06-15",
    "priority": "high",
    "lines": [
      {"description": "Spannfutter SK40", "qty": 4, "unit": "Stk", "unit_price": 185.00},
      {"description": "Programmieren CNC", "qty": 12, "unit": "h", "unit_price": 68.50, "discount_pct": 5}
    ]
  }'</pre>
        </div>

        <p class="text-[11px] text-neutral-500 mt-3">
          <strong>Kunden-Matching:</strong> System sucht zuerst nach USt-IdNr, dann E-Mail, dann Name+PLZ. Wenn nichts passt, wird ein neuer Kundendatensatz angelegt (B2B, ZUGFeRD-Format, 14 T Zahlungsziel).<br>
          <strong>Anhänge:</strong> Entweder als <code>url</code> (System lädt sie selbst, max. 8 MB) oder <code>content_base64</code> inline.<br>
          <strong>Auftrags-Erstellung:</strong> Status wird auf <code>confirmed</code> gesetzt — du siehst den neuen Auftrag sofort im To-Do und in der Auftrags-Liste, kannst Stückzahl/Liefertermin nachjustieren.
        </p>
      </div>
    </div>
  </div>

  <div class="flex items-center justify-end sticky bottom-4 py-3 z-10" style="background:transparent;">
    <button class="btn btn-primary" type="submit">Alle Einstellungen speichern</button>
  </div>
</form>

{# ---------- BERECHTIGUNGEN / LEVEL — eigenes Form mit eigenem POST ---------- #}
<form id="permissions" method="post" action="/settings/permissions" class="card max-w-4xl mt-6 mx-auto">
  <div class="card-header"><div>
    <h2>Berechtigungen je Level</h2>
    <p class="sub">Wer darf was am Programm und in den Einstellungen ändern — Häkchen setzen, dann speichern</p>
  </div></div>
  {% if request.query_params.get('perms') == 'saved' %}
  <div class="alert alert-blue text-sm mx-5 mt-4" style="border-left-color:#10b981;">
    <p class="font-medium" style="color:#047857;">✓ Berechtigungen gespeichert</p>
  </div>
  {% endif %}
  <div class="overflow-x-auto">
  <table class="data-table">
    <thead>
      <tr>
        <th style="min-width:280px;">Berechtigung</th>
        {% for r in all_roles %}
        <th class="text-center">{{ r.name }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for group, perms in perm_groups %}
      <tr style="background:#f5f8ff;">
        <td colspan="{{ all_roles|length + 1 }}" class="text-[10px] uppercase tracking-wider font-semibold" style="color:#1e3a8a;padding:8px 20px;">{{ group }}</td>
      </tr>
        {% for code, label in perms %}
        <tr>
          <td>
            <div class="font-medium text-sm">{{ label }}</div>
            <div class="text-[11px] text-neutral-500 nums font-mono">{{ code }}</div>
          </td>
          {% for r in all_roles %}
          <td class="text-center">
            <input type="checkbox" name="perm_{{ r.id }}_{{ code }}" value="1"
                   {% if code in role_perms.get(r.id, []) %}checked{% endif %}>
          </td>
          {% endfor %}
        </tr>
        {% endfor %}
      {% endfor %}
    </tbody>
  </table>
  </div>
  <div class="px-5 py-4 border-t border-neutral-100 flex items-center justify-between">
    <p class="text-xs text-neutral-600">
      Default-Vorschlag: <strong>Administrator</strong> = alles · <strong>Werkstattleiter</strong> = Operativ &amp; Personal ·
      <strong>Maschinenbediener</strong> = Werkstatt-Aktionen · <strong>Auszubildender</strong> = nur Verleih
    </p>
    <button class="btn btn-primary" type="submit">Berechtigungen speichern</button>
  </div>
</form>

  </div>{# / .settings-form-col #}

  <aside class="settings-subnav">
    {% for group_label, items in [
      ("Firma & Recht",   [("Firma","firma"), ("Rechtliches","legal"), ("Belegnummern","numbers")]),
      ("Finanzen",        [("Rechnungen","billing"), ("Kalkulation","calc"),
                            ("Werkzeug-Budget","budget"), ("Bestand","stock"),
                            ("⚡ Erweiterte Features","features")]),
      ("Personal",        [("Mitarbeiter","hr"), ("Mess-Vorlagen","forms"), ("Kalibrierung","calib")]),
      ("Mail & PDF",      [("PDF / Branding","pdf-customization"),
                            ("E-Mail-Templates","emailtpl"), ("SMTP","smtp"),
                            ("Notifications","notify")]),
      ("Sicherheit",      [("Kiosk","kiosk"), ("Sicherheit","security"),
                            ("Audit","audit"), ("Backup","backup")]),
      ("Integration",     [("CNC-Maschinen","machines"), ("REST-API","api"),
                            ("Global","global")]),
      ("Berechtigungen",  [("Rollen","permissions")]),
    ] %}
      <span class="group-label">{{ group_label }}</span>
      {% for label, anchor in items %}
        <a href="#{{ anchor }}" data-section="{{ anchor }}">{{ label }}</a>
      {% endfor %}
    {% endfor %}
  </aside>
</div>{# / .settings-layout #}

<script>
(function() {
  'use strict';
  // Active-Section-Highlight: erkennt welche Sektion aktuell im Viewport ist
  // und markiert den entsprechenden Sub-Nav-Link orange.
  const links = document.querySelectorAll('.settings-subnav a[data-section]');
  if (!links.length || !('IntersectionObserver' in window)) return;
  const sectionMap = new Map();
  links.forEach(a => sectionMap.set(a.dataset.section, a));
  const sections = [];
  sectionMap.forEach((_, id) => {
    const el = document.getElementById(id);
    if (el) sections.push(el);
  });
  function setActive(sectionId) {
    links.forEach(a => a.classList.toggle('is-active', a.dataset.section === sectionId));
  }
  const obs = new IntersectionObserver((entries) => {
    const visible = entries
      .filter(e => e.isIntersecting)
      .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
    if (visible.length > 0) {
      const link = sectionMap.get(visible[0].target.id);
      if (link) {
        setActive(visible[0].target.id);
        // Auto-Scroll der Sidebar damit aktiver Link sichtbar bleibt
        link.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
      }
    }
  }, {
    rootMargin: '-100px 0px -65% 0px',
    threshold: 0,
  });
  sections.forEach(s => obs.observe(s));
})();
</script>

<!-- v1.7.0: Drag & Drop für Logo + Briefpapier -->
<script>
(function() {
  'use strict';

  function setupDrop(zoneId, inputId, endpoint, fieldName, onSuccess) {
    const zone = document.getElementById(zoneId);
    const input = document.getElementById(inputId);
    if (!zone || !input) return;

    function highlight(on) {
      zone.style.borderColor = on ? '#2563EB' : '#cbd5e1';
      zone.style.background  = on ? '#eff6ff' : '#f8fafc';
    }

    zone.addEventListener('click', () => input.click());
    zone.addEventListener('dragover', e => { e.preventDefault(); highlight(true); });
    zone.addEventListener('dragleave', () => highlight(false));
    zone.addEventListener('drop', e => {
      e.preventDefault();
      highlight(false);
      if (e.dataTransfer.files.length > 0) upload(e.dataTransfer.files[0]);
    });
    input.addEventListener('change', e => {
      if (e.target.files.length > 0) upload(e.target.files[0]);
    });

    function upload(file) {
      const fd = new FormData();
      fd.append(fieldName, file);
      zone.querySelector('div, img').textContent = '⏳ Hochladen…';
      fetch(endpoint, { method: 'POST', body: fd })
        .then(r => r.json())
        .then(data => {
          if (data.error) {
            alert('Upload fehlgeschlagen: ' + data.error);
            location.reload();   // Status-Anzeige reset
          } else if (onSuccess) {
            onSuccess(data);
          } else {
            location.reload();   // Default: Settings-Seite neu laden
          }
        })
        .catch(err => alert('Netzwerk-Fehler: ' + err));
    }
  }

  // Beide Quick-Drop-Felder (Logo + Briefpapier) verkabeln
  setupDrop('letterhead-quick-drop', 'letterhead-file-input',
            '/api/branding/upload-letterhead', 'file', () => reloadPreviewAfterUpload());
  setupDrop('logo-drop', 'logo-file-input',
            '/api/branding/upload-logo', 'file', () => reloadPreviewAfterUpload());

  // Nach Upload: Seite reloaden damit alle Status-Anzeigen frisch sind
  function reloadPreviewAfterUpload() {
    setTimeout(() => location.reload(), 300);
  }

  // Remove-Buttons
  const lhRemove = document.getElementById('letterhead-quick-remove');
  if (lhRemove) {
    lhRemove.addEventListener('click', e => {
      e.preventDefault(); e.stopPropagation();
      if (!confirm('Briefpapier wirklich entfernen?')) return;
      fetch('/api/branding/remove-letterhead', { method: 'POST' })
        .then(r => r.json()).then(() => location.reload());
    });
  }
  const logoRemove = document.getElementById('logo-remove');
  if (logoRemove) {
    logoRemove.addEventListener('click', e => {
      e.preventDefault(); e.stopPropagation();
      if (!confirm('Logo wirklich entfernen?')) return;
      fetch('/api/branding/remove-logo', { method: 'POST' })
        .then(r => r.json()).then(() => location.reload());
    });
  }

  // === v1.7.0: Live-Update der Vorschau bei Form-Änderungen ===
  // Beobachtet alle PDF-/Branding-Settings-Felder. Bei Änderung wird der
  // Vorschau-Embed mit den AKTUELLEN (noch nicht gespeicherten) Werten neu geladen.
  const previewEmbed = document.getElementById('branding-preview-embed');
  if (previewEmbed) {
    const watchFields = [
      'setting_pdf_color_primary', 'setting_pdf_color_secondary', 'setting_pdf_color_text',
      'setting_pdf_layout_style', 'setting_pdf_show_logo', 'setting_pdf_logo_position',
      'setting_pdf_footer_quote', 'setting_pdf_footer_invoice',
      'setting_pdf_footer_delivery_note', 'setting_pdf_footer_dunning',
    ];
    let debounceTimer = null;

    function refreshPreview() {
      const params = new URLSearchParams();
      watchFields.forEach(name => {
        const el = document.querySelector('[name="' + name + '"]');
        if (el && el.value !== undefined && el.value !== '') {
          // Strip "setting_" prefix → API-Parameter-Name
          const apiKey = name.replace(/^setting_/, '');
          params.set(apiKey, el.value);
        }
      });
      params.set('_v', Date.now());
      previewEmbed.src = '/api/branding/preview.pdf?' + params.toString() + '#toolbar=0&navpanes=0';
    }

    function debouncedRefresh() {
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(refreshPreview, 600);
    }

    watchFields.forEach(name => {
      const el = document.querySelector('[name="' + name + '"]');
      if (!el) return;
      // Color-Picker + Text-Inputs: 'input' für Live-Tippen
      // Selects: 'change' reicht
      el.addEventListener('input', debouncedRefresh);
      el.addEventListener('change', debouncedRefresh);
    });

    // Color-Picker (separat, weil eigener Name mit _picker-Suffix)
    document.querySelectorAll('input[type="color"][name$="_picker"]').forEach(picker => {
      picker.addEventListener('input', e => {
        // Sync den Text-Input, der eigentlich an den Server geht
        const baseName = picker.name.replace(/_picker$/, '');
        const txt = document.querySelector('[name="' + baseName + '"]');
        if (txt) {
          txt.value = e.target.value.replace('#', '').toUpperCase();
          debouncedRefresh();
        }
      });
    });
  }
})();
</script>
{% endblock %}