:root{
  --bg:#1b1d22;
  --panel:#ffffff;
  --accent:#a4132c;
  --accent-dark:#7c0e21;
  --text:#222;
  --muted:#8a8f98;
  --bar-h:56px;
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;height:100%;
  background:var(--bg);
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  color:var(--text);
  overflow:hidden;
}

/* Topbar */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--bar-h);
  background:#111318;color:#fff;
  display:flex;align-items:center;gap:8px;
  padding:0 10px;z-index:55;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.catalog-title{
  font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-right:6px;max-width:24vw;
}
.icon-btn{
  background:transparent;border:none;color:#fff;cursor:pointer;
  width:38px;height:38px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.icon-btn:hover{background:rgba(255,255,255,.12);}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.search-wrap{position:relative;flex:1;display:flex;align-items:center;max-width:420px;}
.search-wrap input{
  display:none;
  width:100%;padding:8px 10px;border-radius:8px;border:none;
  background:#262a33;color:#fff;font-size:14px;outline:none;
}
.search-wrap input.active{display:block;}
.search-wrap input::placeholder{color:#9198a3;}

.page-indicator{
  margin-left:auto;margin-right:6px;color:#c9cbd1;font-size:13px;white-space:nowrap;
}

/* Stage */
#stage{
  position:absolute;top:var(--bar-h);bottom:0;left:0;right:0;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center, #2b2f38 0%, #14161a 100%);
}
#book{box-shadow:0 20px 60px rgba(0,0,0,.55);}
#book .page{background:#fff;}
#book canvas{cursor:zoom-in;touch-action:pan-y;}

.nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(17,19,24,.72);color:#fff;border:1px solid rgba(255,255,255,.35);
  width:46px;height:46px;border-radius:50%;font-size:18px;cursor:pointer;z-index:30;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
  transition:left .25s ease, right .25s ease;
}
.nav-btn:hover{background:rgba(17,19,24,.92);border-color:#fff;}
.nav-btn.nav-hidden{opacity:0;pointer-events:none;}
/* Fallback-Position, bis JS (positionNavButtons) die Pfeile an den Buchrand setzt */
.nav-prev{left:14px;}
.nav-next{right:14px;}
@media (max-width:700px){
  .nav-btn{width:36px;height:36px;font-size:14px;}
  .nav-prev{left:4px;}
  .nav-next{right:4px;}
}

/* QR-Code-Links: unsichtbare Klickflächen genau über den im PDF erkannten
   QR-Codes (Position/Größe kommen relativ zur Seite aus data/qrlinks.json
   und werden von JS in Pixel über dem jeweils sichtbaren Buch platziert).
   Der Layer selbst blockt keine Klicks (pointer-events:none), nur die
   einzelnen Hotspots sind klickbar. */
.qr-layer{position:absolute;pointer-events:none;z-index:15;}
/* Während des Umblätterns (3D-Kurveneffekt) verzerrt sich das Seitenbild
   perspektivisch - die flache Klickfläche kann da nicht mithalten und wird
   deshalb bis zum Ruhezustand ausgeblendet, siehe app.js changeState. */
.qr-layer.qr-layer-hidden{visibility:hidden;}
.qr-hotspot{
  position:absolute;pointer-events:auto;cursor:pointer;
  border-radius:4px;border:2px solid transparent;background:rgba(74,163,255,0);
  transition:background .15s,border-color .15s;
}
.qr-hotspot:hover{background:rgba(74,163,255,.2);border-color:rgba(74,163,255,.9);}

.hint{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  color:#c9cbd1;font-size:12px;background:rgba(0,0,0,.35);
  padding:6px 12px;border-radius:20px;pointer-events:none;
  transition:opacity .4s;z-index:20;
}
.hint.hidden{opacity:0;}

/* Side panels (TOC / Suche) */
.side-panel{
  position:fixed;top:var(--bar-h);bottom:0;left:0;width:320px;max-width:88vw;
  background:var(--panel);color:var(--text);
  transform:translateX(-105%);transition:transform .25s ease;
  z-index:50;box-shadow:4px 0 20px rgba(0,0,0,.3);
  display:flex;flex-direction:column;
}
.side-panel.open{transform:translateX(0);}
.side-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid #eee;
}
.side-panel-head h2{font-size:16px;margin:0;}
/* Close-Buttons: im hellen Sidepanel dunkel, im dunklen Overlay (Zoom/Thumbs) hell */
.side-panel-head .close-btn{color:#333;}
.side-panel-head .close-btn:hover{background:#eee;}
.overlay-head .close-btn{color:#fff;font-size:20px;}
.overlay-head .close-btn:hover{background:rgba(255,255,255,.15);}

.toc-list{overflow-y:auto;padding:8px 0;}
.toc-item{
  display:flex;justify-content:space-between;gap:8px;
  padding:9px 18px;cursor:pointer;font-size:14px;
}
.toc-item:hover{background:#f5f0f1;}
.toc-item .p{color:var(--muted);font-size:12px;flex-shrink:0;}
.toc-group-title{
  padding:12px 16px 4px;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent);
}
.toc-children{padding-left:10px;}

.search-results{overflow-y:auto;padding:6px 0;}
.search-result{
  padding:10px 16px;border-bottom:1px solid #f0f0f0;cursor:pointer;
}
.search-result:hover{background:#f5f0f1;}
.search-result .p{font-size:12px;color:var(--accent);font-weight:600;margin-bottom:2px;}
.search-result .snippet{font-size:13px;color:#444;line-height:1.35;}
.search-result mark{background:#ffe08a;color:#111;padding:0 1px;border-radius:2px;}
.search-empty{padding:16px;color:var(--muted);font-size:13px;}

/* Overlays (Thumbs / Zoom) */
.overlay{
  position:fixed;inset:0;background:#111318;color:#fff;
  transform:translateY(100%);transition:transform .25s ease;
  z-index:60;display:flex;flex-direction:column;
}
.overlay.open{transform:translateY(0);}
.overlay-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0;
}
.overlay-head h2{font-size:15px;margin:0;font-weight:600;}

.thumb-grid{
  flex:1;overflow-y:auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px;padding:16px;
}
.thumb-item{cursor:pointer;text-align:center;}
.thumb-item img{width:100%;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.4);display:block;}
.thumb-item span{display:block;font-size:11px;color:#aaa;margin-top:4px;}
.thumb-item:hover img{outline:2px solid var(--accent);}

.zoom-controls{display:flex;gap:4px;align-items:center;}
.zoom-viewport{
  flex:1;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;cursor:grab;
}
.zoom-viewport.dragging{cursor:grabbing;}
.zoom-pages{
  display:flex;align-items:flex-start;transform-origin:0 0;
  position:absolute;left:0;top:0;
}
.zoom-pages img{
  height:100%;width:auto;display:block;
  user-select:none;-webkit-user-drag:none;
}

.scrim{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:45;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.scrim.show{opacity:1;pointer-events:auto;}

@media (max-width:640px){
  .catalog-title{max-width:30vw;font-size:13px;}
  .search-wrap{max-width:none;}
}