/* ---------- Layout ---------- */
.bb-katalog-wrap{max-width:1200px;margin:0 auto;padding:20px 0 60px}
.bb-katalog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.bb-katalog-head h1{margin:16px 0 0 0;font-size:30px;text-transform:uppercase;line-height:1.2}
.bb-katalog-sub{opacity:.7;margin-top:6px;font-size:15px;line-height:24px;}
.bb-katalog-controls{display:flex;gap:10px;align-items:center}
.bb-btn{appearance:none;border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:999px;padding:10px 14px;cursor:pointer;font-weight:600}
.bb-btn[disabled]{opacity:.4;cursor:not-allowed}
.bb-katalog-error{border:1px solid rgba(220,38,38,.35);background:rgba(220,38,38,.08);padding:14px 16px;border-radius:12px;margin:18px 0;color:#7f1d1d}
.bb-katalog-tip{margin-top:10px;opacity:.75;font-size:13px;text-align:center}

/* ---------- Book ---------- */
.bb-book-shell{position:relative;perspective:1600px}
.bb-book{position:relative;margin:0 auto;user-select:none}
.bb-spread{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:16px;overflow:hidden;box-shadow:0 14px 42px rgba(0,0,0,.12);background:#f3f4f6;aspect-ratio: 1.414/1;max-height:78vh}
.bb-spread{aspect-ratio:1.414/1;max-height:78vh}
.bb-book-shell{display:flex;justify-content:center}
.bb-page{position:relative;background:#e5e7eb}
.bb-page{aspect-ratio:1/1.414;min-height:0}
.bb-page img{display:block;width:100%;height:auto;max-width:100%}
.bb-page.is-empty{background:linear-gradient(135deg, rgba(0,0,0,.03), rgba(0,0,0,.01))}
.bb-page-shadow{position:absolute;inset:0;pointer-events:none}

/* Click zones */
.bb-clickzone{position:absolute;top:0;bottom:0;width:50%;z-index:5}
.bb-clickzone.left{left:0}
.bb-clickzone.right{right:0}

/* Desktop sizing */
.bb-book{width:min(1100px, 100%)}
.bb-spread{width:100%}

/* Mobile: single page */
@media (max-width: 720px){
  .bb-spread{grid-template-columns:1fr;aspect-ratio:1/1.414;max-height:82vh}
  .bb-clickzone{display:none} /* mobile: navigation via swipe + buttons */
  .bb-katalog-head{flex-direction:column;align-items:flex-start}

  .bb-page.is-left{display:none}
  .bb-page.is-right{grid-column:1}
  .bb-sheet{left:0;width:100%}
}

/* ---------- Flip animation (real page turn) ---------- */
.bb-spread{position:relative}
.bb-page{min-height:420px}
@media (max-width: 980px){
  .bb-page{min-height:340px}
}
@media (max-width: 720px){
  .bb-page{min-height:520px}
}

/* The turning sheet overlay */
.bb-sheet{position:absolute;top:0;bottom:0;left:50%;width:50%;display:none;z-index:12;pointer-events:none}
.bb-sheet.is-mobile{left:0;width:100%}
.bb-sheet .bb-sheet-inner{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(0deg);transition:transform 920ms cubic-bezier(.2,.85,.18,1);will-change:transform}
.bb-sheet .bb-sheet-face{position:absolute;inset:0;backface-visibility:hidden;background-size:contain;background-position:center;background-repeat:no-repeat}
.bb-sheet .bb-sheet-back{transform:rotateY(180deg)}

/* Hinge + shadow */
.bb-sheet.from-right .bb-sheet-inner{transform-origin:left center}
.bb-sheet.from-left  .bb-sheet-inner{transform-origin:right center}
.bb-sheet:before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to left, rgba(0,0,0,.35), rgba(0,0,0,0));
  opacity:.0;
  transition:opacity 920ms cubic-bezier(.2,.85,.18,1);
  pointer-events:none;
}
.bb-sheet.from-left:before{
  background:linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,0));
}


/* Extra highlight + depth */
.bb-sheet:after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 20% 50%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%);
  opacity:0;
  transition:opacity 920ms cubic-bezier(.2,.85,.18,1);
  pointer-events:none;
  mix-blend-mode:screen;
}
.bb-sheet .bb-sheet-inner{
  box-shadow:0 18px 45px rgba(0,0,0,.35);
}
.bb-sheet.turning-next:after,
.bb-sheet.turning-prev:after{opacity:.55}
/* Turn states */
.bb-sheet.turning-next{display:block}
.bb-sheet.turning-next:before{opacity:.95}
.bb-sheet.turning-next .bb-sheet-inner{transform:rotateY(-180deg)}

.bb-sheet.turning-prev{display:block}
.bb-sheet.turning-prev:before{opacity:.95}
.bb-sheet.turning-prev .bb-sheet-inner{transform:rotateY(180deg)}

/* Subtle book tilt while turning */


/* --- Header spacing --- */
.bb-katalog-gap{height:10px}

/* --- Pages: book-like join + overscan to kill inner white margins --- */
.bb-spread{gap:0 !important}
.bb-page{overflow:hidden; position:relative}
.bb-page img{width:100%; height:100%; object-fit:contain; display:block; transform:scale(1.08)}
.bb-page.is-left img{transform-origin:right center}
.bb-page.is-right img{transform-origin:left center}

/* subtle spine */
.bb-book:before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:26px;
  height:100%;
  pointer-events:none;
  background:linear-gradient(to right, rgba(0,0,0,0.08), rgba(0,0,0,0.02), rgba(0,0,0,0.08));
  opacity:.35;
  z-index:4;
}

/* Page numbers */
.bb-pageno{
  position:absolute;
  bottom:10px;
  padding:6px 10px;
  font-size:14px;
  line-height:1;
  background:rgba(230,230,230,0.85);
  border:1px solid rgba(0,0,0,0.18);
  border-radius:10px;
  color:#111;
  z-index:6;
  min-width:42px;
}
.bb-pageno-left{left:10px; text-align:left}
.bb-pageno-right{right:10px; text-align:right}
.bb-page.is-empty .bb-pageno{display:none}

/* Zoom modal */
body.bb-no-scroll{overflow:hidden}
.bb-zoom-modal{position:fixed; inset:0; z-index:9999}
.bb-zoom-backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.45)}
.bb-zoom-panel{
  position:relative;
  max-width:min(1100px, 96vw);
  height:96vh;
  max-height:96vh;
  margin:2vh auto;
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.bb-zoom-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.bb-zoom-actions{display:flex; gap:8px; align-items:center}
#bbZoomRange{width:180px}
.bb-zoom-viewport{
  position:relative;
  flex:1;
  min-height:60vh;
  background:#111;
  overflow:hidden;
  cursor:grab;
}
.bb-zoom-viewport:active{cursor:grabbing}
.bb-zoom-img{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(0,0) scale(1);
  transform-origin:center;
  will-change:transform;
  max-width:none;
  max-height:none;
  width:auto;
  height:auto;
}
.bb-zoom-hint{
  padding:8px 12px;
  font-size:13px;
  color:#444;
  border-top:1px solid rgba(0,0,0,0.08);
}
@media (max-width:720px){
  #bbZoomRange{width:120px}
  .bb-pageno{bottom:8px}
}

/* Mobile: Buchfalz / Mittelschatten ausblenden */
@media (max-width: 768px) {
  .bb-spine,
  .bb-book::before,
  .bb-book::after {
    display: none !important;
  }
}

/* Pinch-Zoom & Doppel-Tap-Zoom im Katalog unterbinden */
.bb-book,
.bb-book * {
  touch-action: pan-y pan-x;
}