UX-Überarbeitung, Signatur-Bausteine, QoL-Verbesserungen

- Neues Layout: Inline-Editor, aufklappbarer Import, ⚙-Tab
- Signatur Header/Footer Baustein-System (Footer pro Abteilung)
- Signatur-Quelle Dropdown (Eigene / = andere@)
- "Vorlage laden" mit Platzhalter-Ersetzung (Name, Email, Abteilung, Tel, Fax)
- "Signatur speichern" pusht automatisch zum Server
- Footer-Editor mit auto-load beim Aufklappen
- Abteilungswechsel synct Footer + Templates neu
- "Aktualisieren" Button = Pull + Push in einem Schritt
- Vorlagen: Checkbox "Für alle Abteilungen"
- Löschen vom Server für alle möglich
- Toolbar für Signaturen gleichwertig mit Vorlagen-Toolbar
- Base64 whitespace-Fix für Gitea API
- Offline-resilient (Cache-Fallback, graceful error handling)

lib/gitea-sync.js

@@ -46,7 +46,8 @@ class GiteaClient {
     }
 
     static fromBase64(b64) {
-        return decodeURIComponent(escape(atob(b64)));
+        if (!b64) return '';
+        return decodeURIComponent(escape(atob(b64.replace(/\s/g, ''))));
     }
 
     encodePath(p) {
@@ -206,6 +207,28 @@ class SyncManager {
         return { success: true, departments };
     }
 
+    /**
+     * Lightweight check: get remote file SHAs without downloading content
+     */
+    async checkRemoteShas() {
+        if (!this.isConfigured) throw new Error('Sync nicht konfiguriert');
+        if (!this.department) throw new Error('Keine Abteilung ausgewählt');
+
+        const remoteShas = {}; // "folder/filename" -> sha
+        const folders = [SHARED_FOLDER, this.department];
+
+        for (const folder of folders) {
+            const files = await this.client.listDir(folder);
+            for (const file of files) {
+                if (file.name.endsWith('.html')) {
+                    remoteShas[`${folder}/${file.name}`] = file.sha;
+                }
+            }
+        }
+
+        return { success: true, remoteShas };
+    }
+
     /**
      * Pull templates from repo: department folder + shared folder
      */
@@ -328,93 +351,203 @@ class SyncManager {
         return { success: true, pushed };
     }
 
-    /**
-     * Pull signatures from repo signatures/ folder and apply to matching Thunderbird identities
-     * Filename = email address (e.g. info@hotel.de.html)
-     */
-    /**
-     * Get the personal filename slug from author name
-     */
     get authorSlug() {
         return SyncManager.toFilename(this.config.authorName || '');
     }
 
+    static get FOOTER_SEPARATOR() {
+        return '<!-- SIG_FOOTER_START -->';
+    }
+
+    static extractHeader(fullSignature) {
+        const idx = fullSignature.indexOf(SyncManager.FOOTER_SEPARATOR);
+        if (idx === -1) return fullSignature;
+        return fullSignature.substring(0, idx).trim();
+    }
+
+    static combineSignature(header, footer) {
+        if (!footer) return header;
+        return header + '\n' + SyncManager.FOOTER_SEPARATOR + '\n' + footer;
+    }
+
     /**
-     * Pull signatures from repo.
-     * For each identity: if personal sig enabled AND personal file exists → use it.
-     * Otherwise use the shared file (email.html).
+     * Load the signature header template from signatures/headers/_vorlage.html
+     */
+    async loadSignatureTemplate() {
+        if (!this.isConfigured) throw new Error('Sync nicht konfiguriert');
+
+        const fileData = await this.client.getFile('signatures/headers/_vorlage.html');
+        if (!fileData || !fileData.content) {
+            throw new Error('Vorlage nicht gefunden unter signatures/headers/_vorlage.html');
+        }
+
+        const html = GiteaClient.fromBase64(fileData.content);
+        return { success: true, html };
+    }
+
+    /**
+     * Pull footer for current department.
+     * Tries signatures/footers/{department}.html first, falls back to signatures/footers/_default.html
+     */
+    async pullFooter() {
+        let fileData = null;
+
+        // Try department-specific footer first
+        if (this.department) {
+            fileData = await this.client.getFile(`signatures/footers/${this.department}.html`);
+        }
+
+        // Fall back to default
+        if (!fileData || !fileData.content) {
+            fileData = await this.client.getFile('signatures/footers/_default.html');
+        }
+
+        // Legacy fallback: old single-file location
+        if (!fileData || !fileData.content) {
+            fileData = await this.client.getFile('signatures/_footer.html');
+        }
+
+        if (!fileData || !fileData.content) return '';
+
+        const footer = GiteaClient.fromBase64(fileData.content);
+        await browser.storage.local.set({ 'sig_footer_cache': footer });
+        return footer;
+    }
+
+    /**
+     * Load footer for editing (returns HTML)
+     */
+    async loadFooter() {
+        if (!this.isConfigured) throw new Error('Sync nicht konfiguriert');
+
+        const footer = await this.pullFooter();
+        return { success: true, html: footer };
+    }
+
+    /**
+     * Push footer for current department to signatures/footers/{department}.html
+     */
+    async pushFooter(html) {
+        if (!this.isConfigured) throw new Error('Sync nicht konfiguriert');
+        if (!this.config.authorName) throw new Error('Bitte Name eintragen');
+        if (!this.department) throw new Error('Keine Abteilung ausgewählt');
+
+        const filepath = `signatures/footers/${this.department}.html`;
+        const commitMsg = `Signatur-Footer ${this.department} - von ${this.config.authorName}`;
+
+        const existing = await this.client.getFile(filepath);
+
+        if (existing && existing.content) {
+            const existingContent = GiteaClient.fromBase64(existing.content);
+            if (existingContent !== html) {
+                await this.client.updateFile(filepath, html, existing.sha, commitMsg);
+            }
+        } else {
+            await this.client.createFile(filepath, html, commitMsg);
+        }
+
+        await browser.storage.local.set({ 'sig_footer_cache': html });
+        return { success: true };
+    }
+
+    /**
+     * Pull signatures from repo using header/footer baustein model.
+     * - Loads shared footer from signatures/_footer.html
+     * - Loads personal headers from signatures/headers/email.authorslug.html
+     * - Combines header + footer and applies to Thunderbird identity
+     * - Resolves "=other@" references in second pass
      */
     async pullSignatures() {
         if (!this.isConfigured) throw new Error('Sync nicht konfiguriert');
 
-        const files = await this.client.listDir('signatures');
-        if (files.length === 0) {
-            return { success: true, updated: 0 };
-        }
+        // Pull shared footer
+        const footer = await this.pullFooter();
 
-        // Build lookup: filename → file entry
-        const fileMap = {};
-        for (const f of files) {
-            if (f.name.endsWith('.html')) {
-                fileMap[f.name.toLowerCase()] = f;
+        // List header files
+        const headerFiles = await this.client.listDir('signatures/headers');
+        const headerMap = {};
+        for (const f of headerFiles) {
+            if (f.name.endsWith('.html') && !f.name.startsWith('_')) {
+                headerMap[f.name.toLowerCase()] = f;
             }
         }
 
-        // Get personal email list
-        const personalResult = await browser.storage.local.get('sig_personal_emails');
-        const personalEmails = new Set((personalResult.sig_personal_emails || []).map(e => e.toLowerCase()));
+        // Get source map
+        const sourceResult = await browser.storage.local.get('sig_source_map');
+        const sourceMap = sourceResult.sig_source_map || {};
 
-        // Get all Thunderbird identities
         const accounts = await browser.accounts.list();
         let updated = 0;
+        const loadedHeaders = {}; // email → header html
+        const allIdentityList = [];
 
+        // First pass: load headers for "own" identities
         for (const account of accounts) {
             const identities = await browser.identities.list(account.id);
             for (const identity of identities) {
                 const email = identity.email.toLowerCase();
-                const isPersonal = personalEmails.has(email);
+                const source = sourceMap[email] || 'own';
+                allIdentityList.push({ id: identity.id, email });
 
+                if (source.startsWith('=')) continue;
+
+                // Try personal header: email.authorslug.html
                 let targetFile = null;
-
-                if (isPersonal && this.authorSlug) {
-                    // Try personal file first: email.authorslug.html
+                if (this.authorSlug) {
                     const personalName = `${email}.${this.authorSlug}.html`;
-                    targetFile = fileMap[personalName] || null;
+                    targetFile = headerMap[personalName] || null;
                 }
 
-                // Fall back to shared file: email.html
-                if (!targetFile) {
-                    targetFile = fileMap[`${email}.html`] || null;
-                }
-
-                if (!targetFile) continue;
+                if (!targetFile) continue; // No header file yet — user hasn't set up signature
 
                 const fileData = await this.client.getFile(targetFile.path);
                 if (!fileData) continue;
 
-                const signature = GiteaClient.fromBase64(fileData.content);
+                const header = GiteaClient.fromBase64(fileData.content);
+                loadedHeaders[email] = header;
+                const fullSig = SyncManager.combineSignature(header, footer);
+
                 await browser.identities.update(identity.id, {
-                    signature: signature,
+                    signature: fullSig,
                     signatureIsPlainText: false
                 });
                 updated++;
             }
         }
 
+        // Second pass: resolve "=other@" references
+        for (const { id, email } of allIdentityList) {
+            const source = sourceMap[email] || 'own';
+            if (!source.startsWith('=')) continue;
+
+            const srcEmail = source.substring(1).toLowerCase();
+            const srcHeader = loadedHeaders[srcEmail];
+            if (srcHeader !== undefined) {
+                const fullSig = SyncManager.combineSignature(srcHeader, footer);
+                await browser.identities.update(id, {
+                    signature: fullSig,
+                    signatureIsPlainText: false
+                });
+                loadedHeaders[email] = srcHeader;
+                updated++;
+            }
+        }
+
         return { success: true, updated };
     }
 
     /**
-     * Push signatures to repo.
-     * Personal: saves as email.authorslug.html
-     * Shared: saves as email.html
+     * Push signature headers to repo.
+     * Only the header part is pushed as signatures/headers/email.authorslug.html
+     * Skips "=other@" identities.
      */
     async pushSignatures() {
         if (!this.isConfigured) throw new Error('Sync nicht konfiguriert');
         if (!this.config.authorName) throw new Error('Bitte Name eintragen (für Commit-Zuordnung)');
+        if (!this.authorSlug) throw new Error('Name fehlt für Dateiname');
 
-        const personalResult = await browser.storage.local.get('sig_personal_emails');
-        const personalEmails = new Set((personalResult.sig_personal_emails || []).map(e => e.toLowerCase()));
+        const sourceResult = await browser.storage.local.get('sig_source_map');
+        const sourceMap = sourceResult.sig_source_map || {};
 
         const accounts = await browser.accounts.list();
         let pushed = 0;
@@ -425,29 +558,27 @@ class SyncManager {
                 if (!identity.signature) continue;
 
                 const email = identity.email.toLowerCase();
-                const isPersonal = personalEmails.has(email);
+                const source = sourceMap[email] || 'own';
+                if (source.startsWith('=')) continue;
 
-                let filename;
-                if (isPersonal && this.authorSlug) {
-                    filename = `${email}.${this.authorSlug}.html`;
-                } else {
-                    filename = `${email}.html`;
-                }
+                // Extract just the header from the full signature
+                const header = SyncManager.extractHeader(identity.signature);
+                if (!header.trim()) continue;
 
-                const filepath = `signatures/${filename}`;
-                const label = isPersonal ? `(persönlich)` : `(gemeinsam)`;
-                const commitMsg = `Signatur ${identity.email} ${label} - von ${this.config.authorName}`;
+                const filename = `${email}.${this.authorSlug}.html`;
+                const filepath = `signatures/headers/${filename}`;
+                const commitMsg = `Signatur-Header ${identity.email} - von ${this.config.authorName}`;
 
                 const existing = await this.client.getFile(filepath);
 
                 if (existing) {
                     const existingContent = GiteaClient.fromBase64(existing.content);
-                    if (existingContent !== identity.signature) {
-                        await this.client.updateFile(filepath, identity.signature, existing.sha, commitMsg);
+                    if (existingContent !== header) {
+                        await this.client.updateFile(filepath, header, existing.sha, commitMsg);
                         pushed++;
                     }
                 } else {
-                    await this.client.createFile(filepath, identity.signature, commitMsg);
+                    await this.client.createFile(filepath, header, commitMsg);
                     pushed++;
                 }
             }
@@ -501,6 +632,22 @@ class SyncManager {
         return { success: true };
     }
 
+    /**
+     * Delete a template from the remote repo by its remote path
+     */
+    async deleteRemoteTemplate(remotePath) {
+        if (!this.isConfigured) throw new Error('Sync nicht konfiguriert');
+        if (!this.config.authorName) throw new Error('Bitte Name eintragen (für Commit-Zuordnung)');
+
+        const fileData = await this.client.getFile(remotePath);
+        if (!fileData) throw new Error('Datei nicht im Repository gefunden');
+
+        const commitMsg = `${remotePath.split('/').pop()} gelöscht von ${this.config.authorName}`;
+        await this.client.deleteFile(remotePath, fileData.sha, commitMsg);
+
+        return { success: true };
+    }
+
     async testConnection() {
         if (!this.isConfigured) throw new Error('Sync nicht konfiguriert');
         const repoInfo = await this.client.testConnection();
@@ -515,7 +662,7 @@ const syncManager = new SyncManager();
 // ── Background message handler for sync ──
 
 browser.runtime.onMessage.addListener(async (msg, sender) => {
-    const syncActions = ['testConnection', 'pullTemplates', 'pushTemplates', 'pullSingleTemplate', 'pushSingleTemplate', 'listDepartments', 'pullSignatures', 'pushSignatures'];
+    const syncActions = ['testConnection', 'pullTemplates', 'pushTemplates', 'pullSingleTemplate', 'pushSingleTemplate', 'deleteRemoteTemplate', 'listDepartments', 'checkRemoteShas', 'pullSignatures', 'pushSignatures', 'loadSignatureTemplate', 'loadFooter', 'pushFooter'];
     if (!syncActions.includes(msg.action)) return;
 
     try {
@@ -533,6 +680,9 @@ browser.runtime.onMessage.addListener(async (msg, sender) => {
             case 'listDepartments':
                 return await syncManager.listDepartments();
 
+            case 'checkRemoteShas':
+                return await syncManager.checkRemoteShas();
+
             case 'pullTemplates':
                 return await syncManager.pullTemplates();
 
@@ -545,12 +695,24 @@ browser.runtime.onMessage.addListener(async (msg, sender) => {
             case 'pushSingleTemplate':
                 return await syncManager.pushSingleTemplate(msg.templateId);
 
+            case 'deleteRemoteTemplate':
+                return await syncManager.deleteRemoteTemplate(msg.remotePath);
+
             case 'pullSignatures':
                 return await syncManager.pullSignatures();
 
             case 'pushSignatures':
                 return await syncManager.pushSignatures();
 
+            case 'loadSignatureTemplate':
+                return await syncManager.loadSignatureTemplate();
+
+            case 'loadFooter':
+                return await syncManager.loadFooter();
+
+            case 'pushFooter':
+                return await syncManager.pushFooter(msg.html);
+
             default:
                 return { success: false, error: 'Unbekannte Aktion' };
         }

lib/mdi/mdi-editor.css

@@ -26,3 +26,4 @@
 .mdi-format-align-right::before { content: "\F0263"; }
 .mdi-link::before { content: "\F0337"; }
 .mdi-format-clear::before { content: "\F0265"; }
+.mdi-image::before { content: "\F02E9"; }

templates_options/templates_options.html

@@ -25,14 +25,6 @@
             border-bottom: 2px solid #4a7c59;
         }
 
-        h3 {
-            font-size: 16px;
-            font-weight: 600;
-            color: #333;
-            margin-top: 24px;
-            margin-bottom: 12px;
-        }
-
         /* Tabs */
         .tab-bar {
             display: flex;
@@ -62,6 +54,15 @@
             font-weight: 600;
         }
 
+        .tab-btn-settings {
+            margin-left: auto;
+            font-size: 16px;
+            padding: 10px 14px;
+            color: #aaa;
+        }
+
+        .tab-btn-settings.active { color: #4a7c59; }
+
         .tab-content { display: none; }
         .tab-content.active { display: block; }
 
@@ -119,6 +120,14 @@
             margin-bottom: 10px;
         }
 
+        select {
+            padding: 8px 10px;
+            border: 1px solid #d0d0d0;
+            border-radius: 6px;
+            font-size: 13px;
+            background: white;
+        }
+
         /* Editor */
         .editor-toolbar {
             display: flex;
@@ -159,7 +168,6 @@
             border: 1px solid #d0d0d0;
             border-radius: 4px;
             font-size: 12px;
-            background: white;
             cursor: pointer;
             color: #555;
         }
@@ -213,7 +221,7 @@
             color: #4a7c59;
         }
 
-        #editor-area {
+        .editor-area {
             width: 100%;
             min-height: 220px;
             max-height: 500px;
@@ -228,21 +236,25 @@
             color: #333;
         }
 
-        #editor-area:focus {
+        .editor-area:focus {
             border-color: #4a7c59;
             box-shadow: 0 0 0 2px rgba(74, 124, 89, 0.15);
         }
 
-        #editor-area:empty::before {
+        .editor-area:empty::before {
             content: "Sehr geehrte/r ...";
             color: #aaa;
         }
 
-        #editor-area ul, #editor-area ol {
+        .editor-area ul, .editor-area ol {
             padding-left: 24px;
             margin-left: 8px;
         }
 
+        .editor-wrapper {
+            margin-bottom: 10px;
+        }
+
         /* Sync indicator dot */
         .sync-dot {
             display: inline-block;
@@ -251,23 +263,12 @@
             border-radius: 50%;
             margin-right: 6px;
             vertical-align: middle;
+            flex-shrink: 0;
         }
         .sync-dot.in-sync { background: #4caf50; }
         .sync-dot.out-of-sync { background: #f44336; }
         .sync-dot.unknown { background: #bbb; }
 
-        .sync-indicator {
-            display: flex;
-            align-items: center;
-            font-size: 12px;
-            color: #777;
-            margin-bottom: 12px;
-        }
-
-        .editor-wrapper {
-            margin-bottom: 10px;
-        }
-
         /* Buttons */
         .btn {
             display: inline-block;
@@ -299,6 +300,11 @@
         }
         .btn-danger:hover { background: #fdf0ef; border-color: #c0392b; }
 
+        .btn-sm {
+            padding: 5px 10px;
+            font-size: 12px;
+        }
+
         .btn + .btn { margin-left: 8px; }
 
         /* Template list */
@@ -318,7 +324,6 @@
         }
 
         .template-item:last-child { border-bottom: none; }
-
         .template-item:hover { background: #fafff8; }
 
         .template-item input[type="checkbox"] {
@@ -352,40 +357,13 @@
             font-weight: bold;
             font-size: 14px;
         }
-        .template-actions .push-btn {
-            color: #4a7c59;
-        }
-        .template-actions .push-btn:hover {
-            background: #e8f0eb;
-            border-color: #4a7c59;
-        }
-        .template-actions .pull-btn {
-            color: #2874a6;
-        }
-        .template-actions .pull-btn:hover {
-            background: #e8f0fb;
-            border-color: #2874a6;
-        }
-
-        .template-actions .edit-btn:hover {
-            background: #e8f0eb;
-            border-color: #4a7c59;
-            color: #4a7c59;
-        }
-
-        .template-actions .delete-btn {
-            color: #c0392b;
-        }
-        .template-actions .delete-btn:hover {
-            background: #fdf0ef;
-            border-color: #c0392b;
-        }
-
-        .toolbar {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 12px;
-        }
+        .template-actions .push-btn { color: #4a7c59; }
+        .template-actions .push-btn:hover { background: #e8f0eb; border-color: #4a7c59; }
+        .template-actions .pull-btn { color: #2874a6; }
+        .template-actions .pull-btn:hover { background: #e8f0fb; border-color: #2874a6; }
+        .template-actions .edit-btn:hover { background: #e8f0eb; border-color: #4a7c59; color: #4a7c59; }
+        .template-actions .delete-btn { color: #c0392b; }
+        .template-actions .delete-btn:hover { background: #fdf0ef; border-color: #c0392b; }
 
         #no-templates {
             padding: 24px;
@@ -401,6 +379,84 @@
             display: none;
         }
 
+        /* Sync bar */
+        .sync-bar {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 10px 16px;
+            background: white;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            margin-bottom: 16px;
+            font-size: 13px;
+        }
+
+        .sync-bar-label {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            color: #777;
+            font-size: 12.5px;
+        }
+
+        /* Inline editor (hidden by default) */
+        #tpl-editor-panel {
+            display: none;
+            margin-bottom: 16px;
+        }
+
+        #tpl-editor-panel.open {
+            display: block;
+        }
+
+        /* Collapsible import */
+        .collapsible-header {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            cursor: pointer;
+            font-size: 13px;
+            color: #777;
+            padding: 8px 0;
+            user-select: none;
+        }
+
+        .collapsible-header:hover { color: #4a7c59; }
+
+        .collapsible-header .arrow {
+            transition: transform 0.15s;
+            font-size: 11px;
+        }
+
+        .collapsible-header.open .arrow {
+            transform: rotate(90deg);
+        }
+
+        .collapsible-body {
+            display: none;
+            padding: 12px 0;
+        }
+
+        .collapsible-body.open {
+            display: block;
+        }
+
+        /* List header */
+        .list-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 12px;
+        }
+
+        .list-header h3 {
+            font-size: 16px;
+            font-weight: 600;
+            color: #333;
+            flex: 1;
+        }
+
         /* Sync settings */
         .sync-status {
             display: flex;
@@ -412,29 +468,14 @@
             margin-bottom: 16px;
         }
 
-        .sync-status.connected {
-            background: #e8f5e9;
-            color: #2e7d32;
-        }
-
-        .sync-status.disconnected {
-            background: #fff3e0;
-            color: #e65100;
-        }
-
-        .sync-status.error {
-            background: #ffebee;
-            color: #c62828;
-        }
+        .sync-status.connected { background: #e8f5e9; color: #2e7d32; }
+        .sync-status.disconnected { background: #fff3e0; color: #e65100; }
+        .sync-status.error { background: #ffebee; color: #c62828; }
 
         .form-group { margin-bottom: 12px; }
         .form-group label { margin-bottom: 4px; }
 
-        .form-row {
-            display: flex;
-            gap: 12px;
-        }
-
+        .form-row { display: flex; gap: 12px; }
         .form-row .form-group { flex: 1; }
 
         .sync-actions {
@@ -457,6 +498,18 @@
             border: 1px solid #e0e0e0;
             display: none;
         }
+
+        /* Footer info text */
+        .footer-info {
+            font-size: 12px;
+            color: #999;
+            font-style: italic;
+            margin-top: 6px;
+            padding: 8px 12px;
+            background: #f9f9f9;
+            border: 1px dashed #e0e0e0;
+            border-radius: 6px;
+        }
     </style>
 </head>
 <body>
@@ -467,162 +520,241 @@
     <div class="tab-bar">
         <button class="tab-btn active" data-tab="templates">Vorlagen</button>
         <button class="tab-btn" data-tab="signatures">Signaturen</button>
-        <button class="tab-btn" data-tab="sync">Synchronisierung</button>
+        <button class="tab-btn tab-btn-settings" data-tab="sync" title="Einstellungen">&#9881;</button>
     </div>
 
-    <!-- Tab: Vorlagen -->
+    <!-- ═══════════ Tab: Vorlagen ═══════════ -->
     <div id="tab-templates" class="tab-content active">
 
-        <!-- Import Section -->
-        <div class="card">
-            <div class="card-title">HTML-Dateien importieren</div>
-            <div class="card-desc">Wähle eine oder mehrere .html Dateien aus (z.B. vom Netzlaufwerk).<br>Dateiname = Vorlagen-Name. Bestehende Vorlagen mit gleichem Namen werden überschrieben.</div>
-            <input type="file" id="import-files" accept=".html,.htm" multiple>
-            <br>
-            <button type="button" class="btn btn-primary" id="import-button">Importieren</button>
-            <span id="import-status" class="status-badge"></span>
-        </div>
-
-        <!-- Add/Edit Section -->
-        <div class="card">
-            <div class="card-title" id="form-legend">Neue Vorlage erstellen</div>
-            <form id="template-form">
-                <input type="hidden" id="template-id">
-                <label for="template-name">Titel</label>
-                <input type="text" id="template-name" required placeholder="z.B. Buchungsbestätigung">
-
-                <label>Inhalt</label>
-                <div class="editor-wrapper">
-                    <div class="editor-toolbar">
-                        <button type="button" data-cmd="bold" title="Fett"><span class="mdi mdi-format-bold"></span></button>
-                        <button type="button" data-cmd="italic" title="Kursiv"><span class="mdi mdi-format-italic"></span></button>
-                        <button type="button" data-cmd="underline" title="Unterstrichen"><span class="mdi mdi-format-underline"></span></button>
-                        <button type="button" data-cmd="strikeThrough" title="Durchgestrichen"><span class="mdi mdi-format-strikethrough"></span></button>
-                        <div class="sep"></div>
-                        <select data-cmd="fontSize" title="Schriftgröße">
-                            <option value="">Größe</option>
-                            <option value="1">Klein</option>
-                            <option value="2">Normal</option>
-                            <option value="3">Mittel</option>
-                            <option value="4">Groß</option>
-                            <option value="5">Sehr groß</option>
-                        </select>
-                        <div class="font-combo" id="font-combo">
-                            <input type="text" id="font-input" title="Schriftart" placeholder="Schriftart" autocomplete="off">
-                            <div class="font-dropdown" id="font-dropdown"></div>
-                        </div>
-                        <div class="sep"></div>
-                        <button type="button" data-cmd="foreColor" data-val="ask" title="Textfarbe"><span class="mdi mdi-format-color-text"></span></button>
-                        <button type="button" data-cmd="hiliteColor" data-val="ask" title="Hintergrundfarbe"><span class="mdi mdi-format-color-highlight"></span></button>
-                        <div class="sep"></div>
-                        <button type="button" data-cmd="insertOrderedList" title="Nummerierte Liste"><span class="mdi mdi-format-list-numbered"></span></button>
-                        <button type="button" data-cmd="insertUnorderedList" title="Aufzählung"><span class="mdi mdi-format-list-bulleted"></span></button>
-                        <div class="sep"></div>
-                        <button type="button" data-cmd="justifyLeft" title="Links ausrichten"><span class="mdi mdi-format-align-left"></span></button>
-                        <button type="button" data-cmd="justifyCenter" title="Zentrieren"><span class="mdi mdi-format-align-center"></span></button>
-                        <button type="button" data-cmd="justifyRight" title="Rechts ausrichten"><span class="mdi mdi-format-align-right"></span></button>
-                        <div class="sep"></div>
-                        <button type="button" data-cmd="createLink" data-val="ask" title="Link einfügen"><span class="mdi mdi-link"></span></button>
-                        <button type="button" data-cmd="removeFormat" title="Formatierung entfernen"><span class="mdi mdi-format-clear"></span></button>
-                    </div>
-                    <div id="editor-area" contenteditable="true"></div>
-                </div>
-
-                <button type="submit" class="btn btn-primary" id="save-button">Speichern</button>
-                <button type="button" class="btn btn-secondary" id="cancel-edit" style="display: none;">Abbrechen</button>
-            </form>
-        </div>
-
-        <!-- Sync actions for templates -->
-        <div class="card">
-            <div class="sync-indicator" id="tpl-sync-indicator">
+        <!-- Sync bar -->
+        <div class="sync-bar">
+            <div class="sync-bar-label" id="tpl-sync-indicator">
                 <span class="sync-dot unknown"></span>
                 <span>Sync-Status unbekannt</span>
             </div>
-            <div style="display:flex;gap:8px;align-items:center;">
-                <button type="button" class="btn btn-secondary" id="sync-pull-button">Vom Server laden</button>
-                <button type="button" class="btn btn-primary" id="sync-push-button">Änderungen hochladen</button>
-                <span id="sync-sync-status" class="status-badge"></span>
+            <button type="button" class="btn btn-secondary btn-sm" id="sync-refresh-button">Aktualisieren</button>
+            <span id="sync-sync-status" class="status-badge"></span>
+        </div>
+
+        <!-- Inline editor (hidden until edit/new) -->
+        <div id="tpl-editor-panel">
+            <div class="card">
+                <div class="card-title" id="form-legend">Neue Vorlage erstellen</div>
+                <form id="template-form">
+                    <input type="hidden" id="template-id">
+                    <label for="template-name">Titel</label>
+                    <input type="text" id="template-name" required placeholder="z.B. Buchungsbestätigung">
+
+                    <label>Inhalt</label>
+                    <div class="editor-wrapper">
+                        <div class="editor-toolbar" id="tpl-toolbar">
+                            <button type="button" data-cmd="bold" title="Fett"><span class="mdi mdi-format-bold"></span></button>
+                            <button type="button" data-cmd="italic" title="Kursiv"><span class="mdi mdi-format-italic"></span></button>
+                            <button type="button" data-cmd="underline" title="Unterstrichen"><span class="mdi mdi-format-underline"></span></button>
+                            <button type="button" data-cmd="strikeThrough" title="Durchgestrichen"><span class="mdi mdi-format-strikethrough"></span></button>
+                            <div class="sep"></div>
+                            <select data-cmd="fontSize" title="Schriftgröße">
+                                <option value="">Größe</option>
+                                <option value="1">Klein</option>
+                                <option value="2">Normal</option>
+                                <option value="3">Mittel</option>
+                                <option value="4">Groß</option>
+                                <option value="5">Sehr groß</option>
+                            </select>
+                            <div class="font-combo" id="font-combo">
+                                <input type="text" id="font-input" title="Schriftart" placeholder="Schriftart" autocomplete="off">
+                                <div class="font-dropdown" id="font-dropdown"></div>
+                            </div>
+                            <div class="sep"></div>
+                            <button type="button" data-cmd="foreColor" data-val="ask" title="Textfarbe"><span class="mdi mdi-format-color-text"></span></button>
+                            <button type="button" data-cmd="hiliteColor" data-val="ask" title="Hintergrundfarbe"><span class="mdi mdi-format-color-highlight"></span></button>
+                            <div class="sep"></div>
+                            <button type="button" data-cmd="insertOrderedList" title="Nummerierte Liste"><span class="mdi mdi-format-list-numbered"></span></button>
+                            <button type="button" data-cmd="insertUnorderedList" title="Aufzählung"><span class="mdi mdi-format-list-bulleted"></span></button>
+                            <div class="sep"></div>
+                            <button type="button" data-cmd="justifyLeft" title="Links ausrichten"><span class="mdi mdi-format-align-left"></span></button>
+                            <button type="button" data-cmd="justifyCenter" title="Zentrieren"><span class="mdi mdi-format-align-center"></span></button>
+                            <button type="button" data-cmd="justifyRight" title="Rechts ausrichten"><span class="mdi mdi-format-align-right"></span></button>
+                            <div class="sep"></div>
+                            <button type="button" data-cmd="createLink" data-val="ask" title="Link einfügen"><span class="mdi mdi-link"></span></button>
+                            <button type="button" id="tpl-insert-image" title="Bild einfügen"><span class="mdi mdi-image"></span></button>
+                            <button type="button" data-cmd="removeFormat" title="Formatierung entfernen"><span class="mdi mdi-format-clear"></span></button>
+                        </div>
+                        <div id="editor-area" class="editor-area" contenteditable="true"></div>
+                        <input type="file" id="tpl-image-file" accept="image/*" style="display:none;">
+                    </div>
+
+                    <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
+                        <input type="checkbox" id="tpl-shared-toggle" style="width:16px;height:16px;accent-color:#4a7c59;">
+                        <label for="tpl-shared-toggle" style="margin-bottom:0;cursor:pointer;">Für alle Abteilungen (<code>_gemeinsam</code>)</label>
+                    </div>
+
+                    <button type="submit" class="btn btn-primary" id="save-button">Speichern</button>
+                    <button type="button" class="btn btn-secondary" id="cancel-edit">Abbrechen</button>
+                </form>
             </div>
         </div>
 
         <!-- Template List -->
-        <h3>Gespeicherte Vorlagen</h3>
-        <div class="toolbar">
-            <button type="button" class="btn btn-secondary" id="select-all-button">Alle auswählen</button>
-            <button type="button" class="btn btn-danger" id="delete-selected-button">Ausgewählte löschen</button>
+        <div class="list-header">
+            <h3>Vorlagen</h3>
+            <button type="button" class="btn btn-primary btn-sm" id="new-template-button">+ Neue Vorlage</button>
         </div>
+
         <div id="templates-list">
             <p id="no-templates">Keine Vorlagen vorhanden.</p>
         </div>
+
+        <div style="margin-top:8px;display:flex;gap:8px;">
+            <button type="button" class="btn btn-secondary btn-sm" id="select-all-button">Alle auswählen</button>
+            <button type="button" class="btn btn-danger btn-sm" id="delete-selected-button">Ausgewählte löschen</button>
+        </div>
+
+        <!-- Collapsible import -->
+        <div style="margin-top:16px;">
+            <div class="collapsible-header" id="import-toggle">
+                <span class="arrow">&#9654;</span> Aus Dateien importieren
+            </div>
+            <div class="collapsible-body" id="import-body">
+                <div class="card-desc">Wähle eine oder mehrere .html Dateien aus (z.B. vom Netzlaufwerk). Dateiname = Vorlagen-Name.</div>
+                <input type="file" id="import-files" accept=".html,.htm" multiple>
+                <br>
+                <button type="button" class="btn btn-secondary btn-sm" id="import-button">Importieren</button>
+                <span id="import-status" class="status-badge"></span>
+            </div>
+        </div>
     </div>
 
-    <!-- Tab: Signaturen -->
+    <!-- ═══════════ Tab: Signaturen ═══════════ -->
     <div id="tab-signatures" class="tab-content">
 
-        <!-- Sync actions for signatures -->
-        <div class="card">
-            <div class="sync-indicator" id="sig-sync-indicator">
+        <!-- Sync bar -->
+        <div class="sync-bar">
+            <div class="sync-bar-label" id="sig-sync-indicator">
                 <span class="sync-dot unknown"></span>
                 <span>Sync-Status unbekannt</span>
             </div>
-            <div style="display:flex;gap:8px;align-items:center;">
-                <button type="button" class="btn btn-secondary" id="sig-sync-pull">Vom Server laden</button>
-                <button type="button" class="btn btn-primary" id="sig-sync-push">Signaturen hochladen</button>
-                <span id="sig-sync-status" class="status-badge"></span>
-            </div>
+            <button type="button" class="btn btn-secondary btn-sm" id="sig-sync-refresh">Aktualisieren</button>
+            <span id="sig-sync-status" class="status-badge"></span>
         </div>
 
         <div class="card">
             <div class="card-title">E-Mail Signaturen verwalten</div>
-            <div class="card-desc">Hier kannst du die Signaturen deiner Thunderbird-Identitäten bearbeiten. Änderungen werden direkt in Thunderbird übernommen.</div>
+            <div class="card-desc">Bearbeite hier den persönlichen Teil deiner Signatur (Name, Abteilung, Kontaktdaten). Der gemeinsame Fußbereich (Infoblock, Links, Banner) wird automatisch angefügt.</div>
 
             <div class="form-group">
                 <label for="sig-identity-select">Identität / E-Mail-Adresse</label>
-                <select id="sig-identity-select" style="width:100%;padding:8px 10px;border:1px solid #d0d0d0;border-radius:6px;font-size:13px;">
+                <select id="sig-identity-select" style="width:100%;">
                     <option value="">— Bitte wählen —</option>
                 </select>
             </div>
 
-            <div class="form-group" style="display:flex;align-items:center;gap:8px;">
-                <input type="checkbox" id="sig-personal-toggle" style="width:16px;height:16px;accent-color:#4a7c59;">
-                <label for="sig-personal-toggle" style="margin-bottom:0;cursor:pointer;">Persönliche Signatur verwenden</label>
-                <span id="sig-personal-info" style="font-size:11px;color:#999;"></span>
+            <div class="form-group">
+                <label for="sig-source-select">Signatur-Quelle</label>
+                <div style="display:flex;gap:8px;align-items:center;">
+                    <select id="sig-source-select" style="flex:1;">
+                        <option value="own">Eigene Signatur</option>
+                    </select>
+                    <button type="button" class="btn btn-secondary btn-sm" id="sig-load-template" title="Standard-Vorlage vom Server als Startpunkt laden">Vorlage laden</button>
+                </div>
+                <span id="sig-source-info" style="font-size:11px;color:#999;display:block;margin-top:4px;margin-bottom:8px;"></span>
             </div>
 
-            <label>Signatur</label>
+            <label>Persönlicher Signatur-Kopf</label>
             <div class="editor-wrapper">
                 <div class="editor-toolbar" id="sig-toolbar">
                     <button type="button" data-cmd="bold" title="Fett"><span class="mdi mdi-format-bold"></span></button>
                     <button type="button" data-cmd="italic" title="Kursiv"><span class="mdi mdi-format-italic"></span></button>
                     <button type="button" data-cmd="underline" title="Unterstrichen"><span class="mdi mdi-format-underline"></span></button>
+                    <button type="button" data-cmd="strikeThrough" title="Durchgestrichen"><span class="mdi mdi-format-strikethrough"></span></button>
+                    <div class="sep"></div>
+                    <select data-cmd="fontSize" title="Schriftgröße">
+                        <option value="">Größe</option>
+                        <option value="1">Klein</option>
+                        <option value="2">Normal</option>
+                        <option value="3">Mittel</option>
+                        <option value="4">Groß</option>
+                        <option value="5">Sehr groß</option>
+                    </select>
+                    <div class="font-combo" id="sig-font-combo">
+                        <input type="text" id="sig-font-input" title="Schriftart" placeholder="Schriftart" autocomplete="off">
+                        <div class="font-dropdown" id="sig-font-dropdown"></div>
+                    </div>
                     <div class="sep"></div>
                     <button type="button" data-cmd="foreColor" data-val="ask" title="Textfarbe"><span class="mdi mdi-format-color-text"></span></button>
                     <button type="button" data-cmd="hiliteColor" data-val="ask" title="Hintergrundfarbe"><span class="mdi mdi-format-color-highlight"></span></button>
                     <div class="sep"></div>
+                    <button type="button" data-cmd="insertOrderedList" title="Nummerierte Liste"><span class="mdi mdi-format-list-numbered"></span></button>
+                    <button type="button" data-cmd="insertUnorderedList" title="Aufzählung"><span class="mdi mdi-format-list-bulleted"></span></button>
+                    <div class="sep"></div>
+                    <button type="button" data-cmd="justifyLeft" title="Links ausrichten"><span class="mdi mdi-format-align-left"></span></button>
+                    <button type="button" data-cmd="justifyCenter" title="Zentrieren"><span class="mdi mdi-format-align-center"></span></button>
+                    <button type="button" data-cmd="justifyRight" title="Rechts ausrichten"><span class="mdi mdi-format-align-right"></span></button>
+                    <div class="sep"></div>
                     <button type="button" data-cmd="createLink" data-val="ask" title="Link einfügen"><span class="mdi mdi-link"></span></button>
+                    <button type="button" id="sig-insert-image" title="Bild einfügen"><span class="mdi mdi-image"></span></button>
                     <button type="button" data-cmd="removeFormat" title="Formatierung entfernen"><span class="mdi mdi-format-clear"></span></button>
                 </div>
-                <div id="sig-editor-area" contenteditable="true" style="min-height:120px;max-height:400px;overflow-y:auto;border:1px solid #d0d0d0;border-radius:0 0 6px 6px;background:white;padding:10px 12px;outline:none;font-family:'Segoe UI',Verdana,sans-serif;font-size:13px;color:#333;"></div>
+                <input type="file" id="sig-image-file" accept="image/*" style="display:none;">
+                <div id="sig-editor-area" class="editor-area" contenteditable="true" style="min-height:120px;max-height:400px;"></div>
             </div>
 
-            <div style="margin-top:10px;display:flex;gap:8px;align-items:center;">
+            <div class="footer-info">
+                Der gemeinsame Fußbereich (Infoblock, Links, rechtliche Angaben, Banner) wird beim Speichern und Synchronisieren automatisch angefügt.
+            </div>
+
+            <div style="margin-top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
                 <button type="button" class="btn btn-primary" id="sig-save-button">Signatur speichern</button>
-                <button type="button" class="btn btn-secondary" id="sig-import-file-btn">Aus Datei laden</button>
-                <input type="file" id="sig-import-file" accept=".html,.htm" style="display:none;">
+                <button type="button" class="btn btn-secondary btn-sm" id="sig-import-file-btn">Aus Datei laden (HTML + Bilder)</button>
+                <input type="file" id="sig-import-file" accept=".html,.htm,image/*" multiple style="display:none;">
                 <span id="sig-status" class="status-badge"></span>
             </div>
         </div>
 
+        <!-- Footer Editor (collapsible) -->
+        <div style="margin-top:16px;">
+            <div class="collapsible-header" id="footer-toggle">
+                <span class="arrow">&#9654;</span> Gemeinsamer Fußbereich bearbeiten
+            </div>
+            <div class="collapsible-body" id="footer-body">
+                <div class="card">
+                    <div class="card-desc">Der Fußbereich wird automatisch an alle Signaturen deiner Abteilung angefügt (Banner, Links, rechtliche Angaben). Änderungen gelten für alle Mitarbeiter der Abteilung.</div>
+
+                    <label>Fußbereich</label>
+                    <div class="editor-wrapper">
+                        <div class="editor-toolbar" id="footer-toolbar">
+                            <button type="button" data-cmd="bold" title="Fett"><span class="mdi mdi-format-bold"></span></button>
+                            <button type="button" data-cmd="italic" title="Kursiv"><span class="mdi mdi-format-italic"></span></button>
+                            <button type="button" data-cmd="underline" title="Unterstrichen"><span class="mdi mdi-format-underline"></span></button>
+                            <div class="sep"></div>
+                            <button type="button" data-cmd="foreColor" data-val="ask" title="Textfarbe"><span class="mdi mdi-format-color-text"></span></button>
+                            <button type="button" data-cmd="hiliteColor" data-val="ask" title="Hintergrundfarbe"><span class="mdi mdi-format-color-highlight"></span></button>
+                            <div class="sep"></div>
+                            <button type="button" data-cmd="createLink" data-val="ask" title="Link einfügen"><span class="mdi mdi-link"></span></button>
+                            <button type="button" id="footer-insert-image" title="Bild einfügen"><span class="mdi mdi-image"></span></button>
+                            <button type="button" data-cmd="removeFormat" title="Formatierung entfernen"><span class="mdi mdi-format-clear"></span></button>
+                        </div>
+                        <input type="file" id="footer-image-file" accept="image/*" style="display:none;">
+                        <div id="footer-editor-area" class="editor-area" contenteditable="true" style="min-height:150px;max-height:500px;"></div>
+                    </div>
+
+                    <div style="margin-top:10px;display:flex;gap:8px;align-items:center;">
+                        <button type="button" class="btn btn-primary" id="footer-save-button">Fußbereich speichern &amp; hochladen</button>
+                        <button type="button" class="btn btn-secondary btn-sm" id="footer-load-button">Vom Server laden</button>
+                        <span id="footer-status" class="status-badge"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
-    <!-- Tab: Synchronisierung -->
+    <!-- ═══════════ Tab: Einstellungen (⚙) ═══════════ -->
     <div id="tab-sync" class="tab-content">
 
         <!-- Benutzer & Abteilung -->
         <div class="card">
             <div class="card-title">Benutzer &amp; Abteilung</div>
-            <div class="card-desc">Dein Name wird bei Änderungen im Commit gespeichert, damit nachvollziehbar ist wer was geändert hat.</div>
+            <div class="card-desc">Dein Name wird bei Änderungen gespeichert, damit nachvollziehbar ist wer was geändert hat.</div>
 
             <div class="form-row">
                 <div class="form-group">
@@ -637,11 +769,11 @@
 
             <div class="form-group">
                 <label for="sync-department">Abteilung</label>
-                <div style="display:flex; gap:8px; align-items:start;">
-                    <select id="sync-department" style="flex:1; padding:8px 10px; border:1px solid #d0d0d0; border-radius:6px; font-size:13px;">
+                <div style="display:flex;gap:8px;align-items:start;">
+                    <select id="sync-department" style="flex:1;">
                         <option value="">— Bitte wählen —</option>
                     </select>
-                    <button type="button" class="btn btn-secondary" id="refresh-departments" title="Abteilungen neu laden" style="white-space:nowrap;">Aktualisieren</button>
+                    <button type="button" class="btn btn-secondary btn-sm" id="refresh-departments" title="Abteilungen neu laden">Aktualisieren</button>
                 </div>
                 <div class="card-desc" style="margin-top:6px;">Du erhältst Vorlagen aus deiner Abteilung + dem gemeinsamen Ordner (<code>_gemeinsam</code>).</div>
             </div>
@@ -650,7 +782,7 @@
         <!-- Repository-Verbindung -->
         <div class="card">
             <div class="card-title">Git-Repository Verbindung</div>
-            <div class="card-desc">Verbinde das Plugin mit einem Gitea/Forgejo Repository, um Vorlagen zentral zu verwalten und zwischen Mitarbeitern zu synchronisieren.</div>
+            <div class="card-desc">Verbinde das Plugin mit einem Gitea/Forgejo Repository, um Vorlagen zentral zu verwalten.</div>
 
             <div id="sync-status-bar" class="sync-status disconnected">
                 Nicht verbunden