.bb-prev{position:fixed;inset:0;z-index:200;background:rgba(6,69,48,.72);display:flex;flex-direction:column;padding:16px}
/* Op telefoons schuift de adresbalk in en uit. Met de dynamische schermhoogte valt
   de onderrand van het venster, met de hulptekst, nooit achter die balk. */
@supports (height:100dvh){.bb-prev{height:100dvh}}
.bb-prev__paneel{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bb-white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 12px 40px rgba(6,7,7,.3);max-width:1100px;width:100%;margin:0 auto}
.bb-prev__kop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 18px;border-bottom:1px solid var(--border-card)}
.bb-prev__titel{margin:0;font:700 var(--fs-small) var(--font-body);color:var(--bb-green-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-prev__acts{display:flex;align-items:center;gap:8px;flex:none}
.bb-prev__link{font:600 var(--fs-caption) var(--font-body);color:var(--bb-green-forest);min-height:44px;display:inline-flex;align-items:center;padding:0 10px}
.bb-prev__sluit{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:var(--radius-circle);background:var(--bb-mint);color:var(--bb-green-dark);cursor:pointer}
.bb-prev__sluit:hover{background:var(--bb-gray-light)}
.bb-prev__zoombar{display:flex;align-items:center;gap:4px}
.bb-prev__zoomknop{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:var(--radius-circle);background:var(--bb-mint);color:var(--bb-green-dark);font:700 20px var(--font-body);line-height:1;cursor:pointer}
.bb-prev__zoomknop:hover:not(:disabled){background:var(--bb-gray-light)}
.bb-prev__zoomknop:disabled{opacity:.4;cursor:default}
.bb-prev__zoomwaarde{min-width:60px;height:44px;border:0;background:transparent;font:600 var(--fs-caption) var(--font-body);color:var(--bb-green-forest);cursor:pointer;font-variant-numeric:tabular-nums}
.bb-prev__body{flex:1;min-height:0;background:var(--bb-gray-light);overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;overscroll-behavior:contain}
.bb-prev__body--zoom{cursor:grab;user-select:none}
.bb-prev__body.is-slepend{cursor:grabbing}
.bb-prev__body img,.bb-prev__body canvas{-webkit-user-drag:none;user-select:none}
.bb-prev__zoomvlak{min-width:100%;min-height:100%;display:flex}
.bb-prev__body iframe,.bb-prev__pdf{flex:1;width:100%;height:100%;border:0;display:block}
.bb-prev__pdf{overflow:auto}
.bb-prev__pdfdoc{flex:0 0 auto;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center}
.bb-prev__pdfpagina{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.bb-prev__pdfpagina canvas{display:block;background:var(--bb-white);box-shadow:0 2px 10px rgba(6,7,7,.14)}
.bb-prev__pdfdoc--multi{gap:12px;padding:12px 0}
.bb-prev__laden{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;font:600 var(--fs-caption) var(--font-body);color:var(--fg-2)}
.bb-prev__terug{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;text-align:center;color:var(--fg-2);background:var(--bb-white)}
.bb-prev__body img{margin:auto;max-width:100%;max-height:100%;object-fit:contain;display:block}
.bb-prev__pdf img{width:100%;height:100%;object-fit:contain;background:var(--bb-white)}
.bb-prev__hulp{margin:0;padding:8px 18px 10px;border-top:1px solid var(--border-card);font:400 var(--fs-caption) var(--font-body);color:var(--fg-2);text-align:center}
@media (max-width:759px){.bb-prev__hulp{padding:8px 12px}}
/* Smalle telefoons, waaronder de voorkant van een opvouwbaar toestel. De titel,
   de zoomknoppen, de link en het kruisje pasten daar niet naast elkaar, waardoor
   de knoppen buiten beeld vielen en niet meer aan te tikken waren. Ze staan nu
   onder elkaar, gecentreerd, en het venster gebruikt bijna de volle breedte. */
@media (max-width:560px){
  .bb-prev{padding:8px}
  .bb-prev__paneel{border-radius:var(--radius-md)}
  .bb-prev__kop{flex-wrap:wrap;justify-content:center;gap:2px;padding:6px 8px}
  .bb-prev__titel{flex:1 1 100%;text-align:center;white-space:normal;font-size:14px;line-height:1.3;padding:2px 4px}
  .bb-prev__acts{flex:1 1 100%;justify-content:center;flex-wrap:wrap;gap:4px}
  .bb-prev__zoombar{gap:2px}
  .bb-prev__zoomwaarde{min-width:56px}
  .bb-prev__link{padding:0 8px;font-size:13px}
  .bb-prev__hulp{padding:6px 10px 8px;font-size:12px;line-height:1.35}
}
/* Nog smaller: de link naar een nieuw tabblad wijkt naar een eigen regel onder de
   knoppen, zodat zoomen en sluiten altijd op één rij blijven staan. */
@media (max-width:420px){
  .bb-prev__acts{gap:2px}
  .bb-prev__link{flex:1 1 100%;justify-content:center;min-height:38px;order:2}
  .bb-prev__zoombar{order:1}
  .bb-prev__sluit{order:1}
}
@media (min-width:760px){.bb-prev{padding:28px}}