/* ZEHN X Preview Reader · frei / teilweise / gesperrt */

.zxr {
  border: 1px solid var(--line);
  background: var(--paper-raised);
  display: flex;
  flex-direction: column;
}

.zxr-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem 1.2rem;
  border-bottom: 1px solid var(--line);
  font: 600 11.5px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
}
.zxr-head .zxr-free { color: var(--mist); font-weight: 500; }

.zxr-grid { display: grid; grid-template-columns: 228px 1fr 236px; min-height: 540px; }

/* Inhalt links */
.zxr-toc { border-right: 1px solid var(--line); padding: 1rem 0; overflow-y: auto; max-height: 720px; }
.zxr-toc button {
  display: grid; grid-template-columns: 26px 1fr 14px; gap: .5rem; align-items: baseline;
  width: 100%; text-align: left;
  padding: .5rem 1.1rem;
  border: 0; background: none; cursor: pointer;
  font: 500 .84rem/1.35 var(--sans); color: var(--graphite);
}
.zxr-toc button:hover { background: #EEEBE3; }
.zxr-toc button[aria-current="true"] { background: #EAE6DC; color: var(--ink); box-shadow: inset 3px 0 0 var(--blue); }
.zxr-toc .n { font: 600 10.5px/1.6 var(--mono); color: var(--mist); }
.zxr-toc .lock { font-size: .72rem; color: var(--mist); justify-self: end; }
.zxr-toc button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* Seitenfläche Mitte */
.zxr-stage { padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; background: #ECE9E1; }
.zxr-pagewrap { width: 100%; max-width: 560px; position: relative; }
.zxr-pagewrap img {
  display: block; width: 100%;
  border: 1px solid var(--line);
  box-shadow: 0 22px 44px -26px rgba(22,24,27,.4);
  user-select: none; -webkit-user-drag: none;
}
.zxr-fade { position: relative; }
.zxr-fade::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(180deg, rgba(236,233,225,0), #ECE9E1 88%);
  pointer-events: none;
}

.zxr-nav { display: flex; gap: .6rem; }
.zxr-nav button {
  border: 1px solid var(--line); background: var(--paper-raised); color: var(--graphite);
  font: 600 .82rem/1 var(--sans); padding: .55rem 1rem; cursor: pointer;
}
.zxr-nav button:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.zxr-nav button:disabled { opacity: .38; cursor: default; }

/* Locked Card */
.zxr-locked {
  width: 100%; max-width: 560px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  padding: 2rem 2.1rem;
  display: flex; flex-direction: column; gap: .9rem;
}
.zxr-locked .lockmark { width: 30px; height: 30px; color: var(--blue); }
.zxr-locked h4 { font: 700 1.18rem/1.25 var(--sans); letter-spacing: -.01em; }
.zxr-locked ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.zxr-locked li { display: flex; gap: .6rem; font-size: .9rem; color: var(--graphite); }
.zxr-locked li::before { content: "·"; color: var(--blue); font-weight: 700; }
.zxr-locked .inedition { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); margin-top: .3rem; }

/* Diese Seite rechts */
.zxr-meta { border-left: 1px solid var(--line); padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: 1rem; }
.zxr-meta h5 { font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.zxr-meta .title { font: 650 1rem/1.3 var(--sans); }
.zxr-meta ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem; font-size: .85rem; color: var(--graphite); }
.zxr-meta li { padding-left: .85rem; position: relative; }
.zxr-meta li::before { content: ""; position: absolute; left: 0; top: .52em; width: 5px; height: 5px; background: var(--blue); }
.zxr-meta .state { font: 500 10.5px/1.5 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.zxr-meta .state.free { color: var(--ok); }
.zxr-meta .state.partial { color: var(--warn); }
.zxr-meta .state.locked { color: var(--mist); }
.zxr-meta .btn { justify-content: center; }

@media (max-width: 880px) {
  .zxr-grid { grid-template-columns: 1fr; }
  .zxr-toc { display: flex; overflow-x: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); padding: .5rem; }
  .zxr-toc button { width: auto; white-space: nowrap; grid-template-columns: auto auto auto; padding: .45rem .7rem; }
  .zxr-toc button[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--blue); }
  .zxr-meta { border-left: 0; border-top: 1px solid var(--line); }
}