:root { --vfl-linie: #D7E0EE; --vfl-blau: #0B3B8C; }
/* ---------- Produktbilder (klein) + Großansicht */
.vfl-bild { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px; padding: 0; border: 1px solid var(--vfl-linie); border-radius: 10px; background: #F4F6F9; overflow: hidden; cursor: zoom-in; vertical-align: middle; }
.vfl-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #F4F6F9; }
.vfl-bild--leer { cursor: default; }
.vfl-bild-ersatz { color: #9AA9C2; width: 62%; height: 62%; display: flex; }
.vfl-bild-ersatz svg { width: 100%; height: 100%; }
.vfl-bild:focus-visible { outline: 3px solid var(--vfl-blau); outline-offset: 2px; }
.vfl-bild--beleg { width: 40px; height: 40px; border-radius: 8px; margin: 0 8px 4px 0; float: left; }
.vfl-bild--liste { width: 52px; height: 52px; }
.vfl-liste li.vfl-mit-bild { display: flex; gap: 12px; align-items: center; }
.vfl-liste li.vfl-mit-bild > span { flex: 1; }
.vfl-zoom { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(7, 20, 46, .82); cursor: zoom-out; animation: vfl-ein .15s ease-out; }
.vfl-zoom figure { margin: 0; max-width: min(92vw, 560px); background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); cursor: default; }
.vfl-zoom img { display: block; width: 100%; max-height: 78vh; object-fit: contain; background: #F4F6F9; }
.vfl-zoom figcaption { padding: 12px 16px; font: 600 15px/1.4 -apple-system, "Segoe UI", system-ui, sans-serif; color: #14213D; }
.vfl-zoom-zu { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #fff; color: #072A66; font-size: 30px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
html.vfl-zoom-offen { overflow: hidden; }
@keyframes vfl-ein { from { opacity: 0; } }
@media print { .vfl-bild { border: 0; background: none; } .vfl-bild-ersatz { display: none; } }
.vfl-zoom-ansichten { display: flex; justify-content: center; gap: 6px; padding: 10px 16px 0; }
.vfl-zoom-ansichten button { min-width: 96px; min-height: 40px; padding: 6px 16px; border: 1.5px solid #C9D5E8; border-radius: 999px; background: #fff; color: #072A66; font: 700 14px/1 -apple-system, "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.vfl-zoom-ansichten button.ist-aktiv { background: #0B3B8C; border-color: #0B3B8C; color: #fff; }
.vfl-bild.hat-hinten::after { content: "↻"; position: absolute; right: 2px; bottom: 1px; z-index: 1; font: 700 11px/1 system-ui, sans-serif; color: #0B3B8C; background: rgba(255,255,255,.9); border-radius: 4px; padding: 1px 3px; }