Feature: Beleg-Vorschau-Tooltip in Bank-Zuordnung, Größe in Einstellungen

migrations/050_beleg_vorschau_einstellungen.sql

@@ -0,0 +1,3 @@
+ALTER TABLE company_settings
+    ADD COLUMN IF NOT EXISTS beleg_vorschau_breite  INT NOT NULL DEFAULT 200,
+    ADD COLUMN IF NOT EXISTS beleg_vorschau_hoehe   INT NOT NULL DEFAULT 300;

src/Models/Setting.php

@@ -41,7 +41,8 @@ class Setting
                 mail_from_name=?, mail_from_email=?,
                 mail_subject_template=?, mail_body_template=?,
                 logo_max_width=?, logo_max_height=?,
-                logo_position=?, logo_margin_side=?, logo_margin_top=?
+                logo_position=?, logo_margin_side=?, logo_margin_top=?,
+                beleg_vorschau_breite=?, beleg_vorschau_hoehe=?
              WHERE id=1',
             [
                 $data['firma'] ?? '',
@@ -86,6 +87,8 @@ class Setting
                 $logoPosition,
                 max(0, (int)($data['logo_margin_side'] ?? 75)),
                 max(0, (int)($data['logo_margin_top'] ?? 6)),
+                max(50, (int)($data['beleg_vorschau_breite'] ?? 200)),
+                max(50, (int)($data['beleg_vorschau_hoehe'] ?? 300)),
             ]
         );
     }

src/Views/bank/show.php

@@ -1,11 +1,16 @@
 <?php
 use Steuerkram\View;
+use Steuerkram\Models\Setting;
 $h   = fn($v) => View::h($v);
 $fmt = fn($v) => View::formatMoney($v);
 
 $wert   = (float)$transaction['wert'];
 $isPlus = $wert >= 0;
 $color  = $isPlus ? 'var(--color-success)' : 'var(--color-danger)';
+
+$settings       = Setting::get();
+$vorschauBreite = (int)($settings['beleg_vorschau_breite'] ?? 200);
+$vorschauHoehe  = (int)($settings['beleg_vorschau_hoehe']  ?? 300);
 ?>
 
 <!-- Bankbuchung Info-Bar -->
@@ -101,7 +106,9 @@ $color  = $isPlus ? 'var(--color-success)' : 'var(--color-danger)';
                 <?php foreach ($offeneBelege as $b): ?>
                 <tr>
                     <td class="td-mono">
-                        <a href="/belege/<?= (int)$b['id'] ?>" target="_blank"><?= $h($b['beleg_nr']) ?></a>
+                        <a href="/belege/<?= (int)$b['id'] ?>" target="_blank"
+                           class="beleg-preview-trigger"
+                           data-beleg-id="<?= (int)$b['id'] ?>"><?= $h($b['beleg_nr']) ?></a>
                     </td>
                     <td class="td-mono"><?= $h(View::formatDate($b['beleg_datum'])) ?></td>
                     <td><span class="badge badge-gray"><?= $h($b['belegtyp']) ?></span></td>
@@ -127,3 +134,63 @@ $color  = $isPlus ? 'var(--color-success)' : 'var(--color-danger)';
     </div>
     <?php endif; ?>
 </div>
+
+<!-- Beleg-Vorschau Tooltip -->
+<div id="beleg-tooltip" style="
+    display:none;
+    position:fixed;
+    z-index:9999;
+    pointer-events:none;
+    border:1px solid var(--color-border,#e2e8f0);
+    border-radius:var(--radius,6px);
+    background:#fff;
+    box-shadow:0 4px 20px rgba(0,0,0,.18);
+    overflow:hidden;
+    width:<?= $vorschauBreite ?>px;
+    height:<?= $vorschauHoehe ?>px;
+"></div>
+
+<script>
+(function () {
+    const tooltip = document.getElementById('beleg-tooltip');
+    const W = <?= $vorschauBreite ?>;
+    const H = <?= $vorschauHoehe ?>;
+    let currentId = null;
+    let timer     = null;
+
+    document.querySelectorAll('.beleg-preview-trigger').forEach(function (link) {
+        link.addEventListener('mouseenter', function (e) {
+            const id = link.dataset.belegId;
+            if (!id) return;
+
+            timer = setTimeout(function () {
+                if (currentId !== id) {
+                    currentId = id;
+                    tooltip.innerHTML = '<iframe src="/belege/' + id + '/file" style="width:100%;height:100%;border:none" loading="lazy"></iframe>';
+                }
+                positionTooltip(e);
+                tooltip.style.display = 'block';
+            }, 120);
+        });
+
+        link.addEventListener('mousemove', positionTooltip);
+
+        link.addEventListener('mouseleave', function () {
+            clearTimeout(timer);
+            tooltip.style.display = 'none';
+        });
+    });
+
+    function positionTooltip(e) {
+        const margin = 12;
+        let x = e.clientX + margin;
+        let y = e.clientY + margin;
+
+        if (x + W > window.innerWidth  - margin) x = e.clientX - W - margin;
+        if (y + H > window.innerHeight - margin) y = e.clientY - H - margin;
+
+        tooltip.style.left = Math.max(0, x) + 'px';
+        tooltip.style.top  = Math.max(0, y) + 'px';
+    }
+})();
+</script>

src/Views/settings/form.php

@@ -387,6 +387,26 @@
 </div>
 </form>
 
+<!-- Beleg-Vorschau -->
+<div class="card mb-2">
+    <div class="card-header"><div class="card-title">Beleg-Vorschau (Tooltip)</div></div>
+    <div class="card-body">
+        <p class="text-muted text-sm" style="margin-bottom:1rem">Größe der Vorschau beim Hover über Beleg-Links in der Bank-Buchungs-Maske.</p>
+        <div class="form-grid form-grid-2">
+            <div class="form-group">
+                <label for="beleg_vorschau_breite">Breite (px)</label>
+                <input type="number" id="beleg_vorschau_breite" name="beleg_vorschau_breite" form="settings-form"
+                       value="<?= $h($settings['beleg_vorschau_breite'] ?? 200) ?>" min="50" max="800">
+            </div>
+            <div class="form-group">
+                <label for="beleg_vorschau_hoehe">Höhe (px)</label>
+                <input type="number" id="beleg_vorschau_hoehe" name="beleg_vorschau_hoehe" form="settings-form"
+                       value="<?= $h($settings['beleg_vorschau_hoehe'] ?? 300) ?>" min="50" max="1200">
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- Modal: E-Mail-Text bearbeiten -->
 <div id="mail-text-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;align-items:center;justify-content:center">
     <div style="background:#fff;border-radius:8px;padding:1.5rem;width:520px;max-width:95vw;box-shadow:0 8px 32px rgba(0,0,0,.2)">