/* Katalog-Viewer — Yumpu-ähnlicher Look: dunkelblauer Verlauf, Buchschatten, weisse Icon-Toolbar */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #eef2fb;
  background:
    radial-gradient(1400px 900px at 50% -20%, #274a72 0%, transparent 60%),
    radial-gradient(1200px 800px at 50% 120%, #16263c 0%, transparent 60%),
    linear-gradient(180deg, #10203a 0%, #0a1626 55%, #071020 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
  user-select: none;
}

/* --- Titel oben --- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: 64px;  /* wird per JS auf den Freiraum über dem Buch gesetzt */
  display: flex; align-items: center; justify-content: center;
  padding: 0 18px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 10, 20, .45), transparent);
}
#docTitle {
  font-size: 1rem; font-weight: 600; letter-spacing: .01em;
  color: rgba(255, 255, 255, .9); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* «Jetzt buchen»-Button (Sulser-Grün), erscheint statt des Titels */
#bookBtn {
  position: relative;
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, #3cb43a, #2a9428);
  color: #fff; font-weight: 700; font-size: .95rem; white-space: nowrap;
  padding: 10px 22px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 12px 28px -8px rgba(52, 178, 51, .75);
  transition: transform .12s ease, box-shadow .15s ease;
}
#bookBtn:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -8px rgba(52, 178, 51, .9); }
#bookBtn svg { width: 18px; height: 18px; flex: none; animation: arrowNudge 3.6s ease-in-out infinite; }
#bookBtn[hidden] { display: none; }

/* Lichtstreifen, der um den Button wandert (Border-Beam) */
@property --beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
#bookBtn::before {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 999px;
  padding: 3px;
  background: conic-gradient(from var(--beam-angle),
    transparent 0 78%,
    rgba(180, 255, 160, .9) 88%,
    #eafff0 94%,
    transparent 100%);
  /* Nur den Ring sichtbar lassen, die Fläche ausstanzen */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(120, 230, 110, .8));
  pointer-events: none;
  animation: beamSpin 3.2s linear infinite;
}
@keyframes beamSpin { to { --beam-angle: 360deg; } }

/* Pfeil hüpft ab und zu kurz nach rechts */
@keyframes arrowNudge {
  0%, 74%, 100% { transform: translateX(0); }
  80% { transform: translateX(5px); }
  86% { transform: translateX(0); }
  92% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  #bookBtn::before { animation: none; }
  #bookBtn svg { animation: none; }
}
@media (max-width: 640px) {
  #bookBtn { font-size: .85rem; padding: 8px 16px; gap: 7px; }
  #bookBtn svg { width: 15px; height: 15px; }
}

/* --- Bühne --- */
#stage {
  position: absolute; inset: 0;
  overflow: hidden;
  touch-action: none;
}
#zoomLayer {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transform-origin: 50% 50%;
  will-change: transform;
}
#bookWrap {
  position: relative;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55));
  transition: transform .6s ease;  /* Cover-/Rückseiten-Zentrierung gleitet mit dem Blättern */
}
#book { margin: 0 auto; }

/* Seiten des Buchs */
.page {
  background: #fff;
  overflow: hidden;
}
.page canvas { width: 100%; height: 100%; display: block; }
.page .pending {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #9aa4bd; font-size: .8rem; background: #f2f2f2;
}

/* --- Pan-Overlay bei Zoom --- */
#panCatcher {
  position: absolute; inset: 0; z-index: 10;
  cursor: grab;
}
#panCatcher.grabbing { cursor: grabbing; }

/* --- Pfeile links/rechts --- */
.nav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: 14px; z-index: 15;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(10, 20, 36, .55);
  color: rgba(255, 255, 255, .85);
  display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .15s, color .15s, opacity .2s;
}
.nav-arrow.right { left: auto; right: 14px; }
.nav-arrow:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.nav-arrow svg { width: 22px; height: 22px; }
.nav-arrow:disabled { opacity: .25; cursor: default; }

/* --- Lade-Anzeige --- */
#loading {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-content: center; justify-items: center; gap: 16px;
  background: transparent; color: #b8c4da; font-size: .95rem;
  pointer-events: none;
}
#loading.hidden { display: none; }
.spin {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .15);
  border-top-color: #7fa8dc;
  animation: rot 0.9s linear infinite;
}
@keyframes rot { to { transform: rotate(360deg); } }

/* --- Toolbar unten --- */
#toolbar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 25;
  display: flex; align-items: center; gap: 14px;
  max-width: calc(100vw - 20px);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(8, 16, 30, .72);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6);
}
.tgroup { display: flex; align-items: center; gap: 4px; }
#toolbar button, #toolbar a {
  width: 38px; height: 38px; padding: 8px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%;
  color: rgba(255, 255, 255, .82); cursor: pointer;
  transition: background .15s, color .15s;
}
#toolbar button:hover, #toolbar a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
#toolbar button[hidden], #toolbar a[hidden] { display: none; }
#toolbar svg { width: 20px; height: 20px; }
#pageLabel {
  min-width: 74px; text-align: center;
  font-size: .88rem; font-weight: 600; color: rgba(255, 255, 255, .88);
  font-variant-numeric: tabular-nums;
}

/* Slider */
#slider {
  -webkit-appearance: none; appearance: none;
  width: 220px; height: 4px; border-radius: 99px;
  background: rgba(255, 255, 255, .22);
  outline: none; cursor: pointer;
}
#slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
#slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

/* --- Miniaturansichten --- */
#thumbs {
  position: fixed; left: 0; right: 0; bottom: 74px; z-index: 24;
  display: flex; gap: 10px; align-items: flex-end;
  overflow-x: auto; padding: 12px 16px;
  background: rgba(6, 12, 24, .82);
  border-top: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#thumbs[hidden] { display: none; }
.thumb {
  flex: none; cursor: pointer; text-align: center;
  border: 2px solid transparent; border-radius: 6px; padding: 3px;
  transition: border-color .15s;
}
.thumb canvas { display: block; border-radius: 3px; background: #fff; width: 76px; }
.thumb .n { font-size: .7rem; color: #9aa4bd; margin-top: 4px; }
.thumb.cur { border-color: #7fa8dc; }
.thumb:hover { border-color: rgba(255, 255, 255, .5); }

/* --- Fehleranzeige --- */
#errorBox {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: rgba(4, 8, 16, .8);
}
#errorBox[hidden] { display: none; }
.ebox {
  max-width: 420px; margin: 20px; padding: 30px;
  text-align: center; border-radius: 18px;
  background: rgba(16, 26, 44, .95); border: 1px solid rgba(255, 255, 255, .14);
}
.ebox h2 { margin: 0 0 10px; font-size: 1.2rem; }
.ebox p { margin: 0; color: #9aa4bd; font-size: .92rem; line-height: 1.5; }

/* Doppeltipp-Zoom des Browsers auf Bedienelementen unterbinden */
#toolbar, #topbar, #thumbs { touch-action: manipulation; }

/* --- Klein (Handy) --- */
@media (max-width: 640px) {
  #slider { width: 78px; }
  #toolbar { gap: 4px; padding: 5px 8px; bottom: 10px; max-width: calc(100vw - 16px); }
  .tgroup { gap: 2px; }
  #toolbar button, #toolbar a { width: 32px; height: 32px; padding: 6px; }
  #toolbar svg { width: 18px; height: 18px; }
  #pageLabel { min-width: 48px; font-size: .78rem; }
  .nav-arrow { width: 38px; height: 38px; left: 6px; }
  .nav-arrow.right { right: 6px; }
  #toolbar #btnPrint { display: none; }   /* Drucken auf dem Handy weglassen */
  /* Zoomen geht auf Touch per Pinch — die +/− Knöpfe sparen wir ein.
     Der Zoom-Reset-Knopf erscheint weiterhin, sobald gezoomt ist. */
  #toolbar #btnZoomIn, #toolbar #btnZoomOut { display: none; }
  #thumbs { bottom: 58px; }
}
@media (max-width: 360px) {
  #toolbar #btnThumbs { display: none; }  /* auf sehr schmalen Geräten weglassen */
  #slider { width: 64px; }
}