/* bild-pdf.css — /tools/bild-pdf (05.10.2026). Baut auf werkzeug.css auf. */
.bp [hidden] { display: none !important; }
@media (min-width: 761px) { .bp .wz-reiter { justify-content: center; } }
.bp-symbol { background: linear-gradient(145deg, #3aa4b2, #1c6470); box-shadow: 0 10px 22px rgba(28, 100, 112, 0.25); }
.bp-symbol-pdf { background: linear-gradient(145deg, #3aa4b2, #1c6470); box-shadow: 0 10px 22px rgba(28, 100, 112, 0.25); }
.bp-arbeit { display: flex; flex-direction: column; gap: 1rem; }
.bp-einst { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.9rem 1.4rem; }
.bp-datei { display: flex; flex-direction: column; gap: 0.1rem; margin-right: auto; min-width: 0; }
.bp-datei b { font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-datei small { font-size: 0.8rem; color: var(--sub); }
.bp-unten { align-items: center; }
.bp-abstand { flex: 1; }

/* Seiten (Bilder → PDF) */
.bp-seiten { --rand: 3.4%; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.9rem; }
.bp-seite { display: flex; flex-direction: column; gap: 0.45rem; cursor: grab; animation: wzRein 0.3s var(--ease-out); transition: opacity 0.2s, transform 0.2s; }
.bp-seite.zieht { opacity: 0.4; }
.bp-seite.ziel .bp-blatt { box-shadow: 0 0 0 3px var(--pri3), 0 10px 24px rgba(15, 42, 74, 0.12); }
.bp-blatt {
  aspect-ratio: 595 / 842; padding: var(--rand); border-radius: 6px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px var(--border), 0 8px 20px rgba(15, 42, 74, 0.08); transition: box-shadow 0.2s, aspect-ratio 0.3s;
}
.bp-seite.quer .bp-blatt { aspect-ratio: 842 / 595; }
.bp-seiten[data-format="bild"] .bp-blatt { aspect-ratio: auto; }
.bp-blatt img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.bp-seiten[data-format="bild"] .bp-blatt img { width: 100%; height: auto; }
.bp-seite-unten { display: flex; align-items: center; gap: 0.15rem; }
.bp-seite-unten span { margin-right: auto; font-size: 0.8rem; font-weight: 700; color: var(--sub); padding-left: 0.2rem; }
.bp-seite-unten button {
  width: 30px; height: 30px; border-radius: 9px; border: 0; background: none; color: var(--sub); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s;
}
.bp-seite-unten button:hover:not(:disabled) { background: var(--card); color: var(--pri); }
.bp-seite-unten button:disabled { opacity: 0.3; cursor: default; }
.bp-seite-unten .bp-weg:hover { color: var(--danger) !important; }
.bp-seite-unten svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Bilder (PDF → Bilder) */
.bp-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.9rem; }
.bp-bild { display: flex; flex-direction: column; gap: 0.45rem; }
.bp-bild-rahmen {
  position: relative; aspect-ratio: 595 / 842; border-radius: 6px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px var(--border), 0 8px 20px rgba(15, 42, 74, 0.08);
  display: flex; align-items: center; justify-content: center;
}
.bp-bild-rahmen img { display: block; max-width: 100%; max-height: 100%; animation: wzRein 0.3s var(--ease-out); }
.bp-bild.laedt .bp-bild-rahmen::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(235, 242, 251, 0.9) 50%, transparent 70%) 0 0 / 200% 100%;
  animation: bpSchimmer 1.1s linear infinite;
}
@keyframes bpSchimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.bp-bild-unten { display: flex; align-items: center; gap: 0.4rem; }
.bp-bild-unten span { font-size: 0.82rem; font-weight: 700; }
.bp-bild-unten small { flex: 1; min-width: 0; font-size: 0.72rem; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-bild-unten .wz-rund { width: 34px; height: 34px; }
@media (max-width: 480px) { .bp-seiten { grid-template-columns: repeat(2, 1fr); } .bp-raster { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .bp-bild.laedt .bp-bild-rahmen::after { animation: none; } }