/* Leser — Verlag Dr. Thomas Prüm */
body.leser{height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;}
body.leser::after{opacity:.04;}
.lh{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:14px var(--gut);border-bottom:1px solid var(--line);}
.lback{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--wh);border-radius:999px;padding:5px 14px 5px 5px;transition:background .2s,color .2s;}
.lback .hc{width:28px;height:28px;border-radius:50%;background:var(--red);color:var(--bk);display:grid;place-items:center;}
.lback .hc svg{width:16px;height:16px;}
.lback:hover{background:var(--wh);color:var(--bk);}
.lt{min-width:0;display:flex;align-items:baseline;gap:14px;overflow:hidden;}
.lt b{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(22px,2.6vw,38px);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lt .mono{color:var(--red);white-space:nowrap;}
.lr{display:flex;align-items:center;gap:10px;}
.lbtn{all:unset;cursor:pointer;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;border:1.5px solid var(--wh);border-radius:999px;padding:8px 14px;transition:background .2s,color .2s,border-color .2s;}
.lbtn:hover,.lbtn:focus-visible{background:var(--wh);color:var(--bk);}
.lbtn.r{background:var(--red);border-color:var(--red);color:var(--bk);}
.lbtn.r:hover{background:var(--wh);border-color:var(--wh);}
#lpg{color:var(--grey);min-width:86px;text-align:right;}

.lstage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:12px 0;}
.lbook{display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-y;}
.lbook img,.lbook .blank{width:var(--pw);height:var(--ph);display:block;}
.lbook img{background:var(--bk2);box-shadow:0 30px 70px -25px rgba(0,0,0,.95);}
.lbook.sp img:first-child:not(:only-child){box-shadow:inset -18px 0 30px -18px rgba(0,0,0,.45),0 30px 70px -25px rgba(0,0,0,.95);}
.lbook.sp img+img{box-shadow:inset 18px 0 30px -18px rgba(0,0,0,.35),0 30px 70px -25px rgba(0,0,0,.95);}
.lbook.turn img{animation:lin .35s cubic-bezier(.2,.7,.2,1);}
@keyframes lin{from{opacity:.25;transform:translateX(10px)}to{opacity:1;transform:none}}
.lnav{all:unset;cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;background:var(--red);color:var(--bk);
  display:grid;place-items:center;font-family:var(--disp);font-size:30px;line-height:1;z-index:3;transition:transform .2s,background .2s,opacity .2s;}
.lnav:hover{background:var(--wh);}
.lnav:disabled{opacity:.15;cursor:default;}
#lprev{left:clamp(8px,2vw,30px);} #lnext{right:clamp(8px,2vw,30px);}
.lerr{color:var(--grey);font-style:italic;}

.lf{display:grid;grid-template-columns:1fr;padding:10px var(--gut) 16px;border-top:1px solid var(--line);}
#lrange{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--line);outline:none;cursor:pointer;}
#lrange::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--red);border:0;}
#lrange::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--red);border:0;}
#lrange:focus-visible{outline:2px solid var(--red);outline-offset:8px;}

.lgrid{position:fixed;inset:0;z-index:800;background:rgba(7,7,7,.97);overflow-y:auto;padding:70px var(--gut) 40px;}
.lgrid[hidden]{display:none;}
#lgridx{position:fixed;top:16px;right:var(--gut);z-index:2;}
.lgi{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px 10px;}
.lgi button{all:unset;cursor:pointer;display:block;}
.lgi img{width:100%;height:auto;display:block;background:var(--bk2);transition:outline-color .15s;outline:2px solid transparent;outline-offset:2px;}
.lgi button:hover img,.lgi button:focus-visible img{outline-color:var(--red);}
.lgi .mono{display:block;margin-top:5px;color:var(--grey);font-size:10.5px;}

@media(max-width:640px){
  .lh{grid-template-columns:auto 1fr;gap:10px 12px;padding:10px 16px;}
  .lback{padding:4px;border-width:0;} .lback .ht{display:none;} .lback .hc{width:36px;height:36px;}
  .lt{flex-direction:column;gap:2px;} .lt .mono{font-size:10px;}
  .lr{grid-column:1/3;justify-content:space-between;}
  .lnav{width:42px;height:42px;font-size:24px;top:auto;bottom:6px;transform:none;}
  .lstage{padding-bottom:60px;}
  #lpg{min-width:0;}
}
@media(prefers-reduced-motion:reduce){.lbook.turn img{animation:none;}}