/* Grundlayout */
html, body { height:100%; margin:0; background:#1b1a17; overflow:hidden; color:#2a241a; font-family:"Lora", Georgia, serif; }

/* Header */
.mr-header{
  height:64px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 16px; background:linear-gradient(180deg,#2b2218,#1f1912);
  border-bottom:2px solid #a37b38; color:#f1e2b3;
}
.mr-logo{ display:grid; place-items:center; width:44px; height:44px; border:2px solid #a37b38; border-radius:8px; text-decoration:none; color:#f1e2b3; font-weight:800; }
.mr-title{ margin:0; font-size:1.1rem; letter-spacing:.4px; }

/* JS-Status-Badge */
.js-badge{ width:32px; height:24px; display:grid; place-items:center; border-radius:6px; font-weight:800; font-size:.8rem; }
.js-badge--off{ background:#5a2b2b; border:1px solid #b86; color:#ffd9d9; }
.js-badge--on{  background:#274a2a; border:1px solid #6c6; color:#dfffe0; }

/* Viewer */
.viewer{ height:calc(100vh - 64px); max-width:1600px; margin:0 auto; padding:12px 18px; box-sizing:border-box; }
.spread{ height:56vh; max-height:calc(100% - 24px); display:grid; grid-template-columns:1fr 1fr; gap:20px; position:relative; }

/* Seiten */
.page{ height:100%; background:#efe3c4; border:1px solid rgba(177,138,58,.60); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.45); position:relative; overflow:hidden; display:flex; flex-direction:column; }
.inner{ padding:22px; overflow:hidden; flex:1; }

/* Ornamente */
.page:before{
  content:""; position:absolute; inset:0; border-radius:14px; padding:12px;
  background:
    radial-gradient(120% 50% at 0% 0%, rgba(0,0,0,.18), transparent 50%),
    radial-gradient(120% 50% at 100% 0%, rgba(0,0,0,.18), transparent 50%),
    linear-gradient(90deg, rgba(177,138,58,.35), rgba(255,240,190,.15), rgba(177,138,58,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.hinge{
  position:absolute; left:calc(50% - 9px); top:8px; bottom:8px; width:18px;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.36) 0 6px, rgba(0,0,0,.14) 6px 12px);
  border-left:1px solid rgba(0,0,0,.45); border-right:1px solid rgba(0,0,0,.3);
  border-radius:4px; filter:blur(.3px);
  pointer-events:none; /* blockiert keine Links */
}

/* Navigation */
.navbar{ position:absolute; left:50%; transform:translateX(-50%); bottom:-44px; display:flex; gap:12px; z-index:5; }
.btn{ background:#3b2e1d; border:1px solid #6c5221; color:#f1dfb2; padding:.5rem .85rem; border-radius:8px; font-weight:600; text-decoration:none; }
.btn[aria-disabled="true"]{ opacity:.4; pointer-events:none; }

/* Cover/TOC/Fallback */
.cover{ margin:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cover img{ max-width:100%; max-height:100%; height:auto; border:3px solid #b18a3a; border-radius:10px; }
.cover figcaption{ margin-top:.45rem; font-weight:700; color:#3b2e1d; }
.cover-missing{ height:100%; display:grid; place-items:center; color:#7b6a3a; }

.toc h2{ margin:0 0 .6rem; color:#3b2e1d; }
.toc ul{ list-style:none; padding:0; margin:0; column-count:2; column-gap:24px; }
.toc li{ break-inside:avoid; margin:.2rem 0; }
.toc a{ color:#3b2e1d; text-decoration:none; font-weight:700; }
.toc a:hover{ text-decoration:underline; }

.fallback h2{ margin:.2rem 0 .4rem; }
.fallback{ color:#5a4730; }