/* (F)Luister magazine-lezer: aanvullende opmaak (laadt na site.css) */
.stage{position:relative}
.bookarea{position:relative;width:100%;display:flex;justify-content:center}
.fpage{background:#fbf7f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='16' fill='none' stroke='%23c9a45c' stroke-width='4' stroke-linecap='round' stroke-dasharray='60 40'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 22 22' to='360 22 22' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center no-repeat}
.side{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:56px;height:84px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);color:#fff;font-size:34px;line-height:1;cursor:pointer;border-radius:14px}
.side:hover,.side:focus-visible{background:rgba(255,255,255,.28)}
.side-prev{left:max(8px,calc(50% - 790px))}
.side-next{right:max(8px,calc(50% - 790px))}
.side[disabled]{opacity:.25;cursor:default}
@media(min-width:900px){.side{display:block}}
.rbar{gap:10px 12px}
.rbar button{min-height:48px;min-width:48px}
.rbar button:focus-visible,.side:focus-visible,.ztools button:focus-visible,.resume button:focus-visible{outline:3px solid #c9a45c;outline-offset:2px}
.rbar input[type=range]{display:block;order:5;width:min(520px,92vw);height:32px;flex:0 0 auto}
.rbar #zbtn,.rbar #fs{order:6}
.rbar #pg{font-size:17px}
.rtip{transition:opacity .4s}
.stage.geleesd .rtip{display:none}
.resume{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:center;background:#fbf7f1;color:#1a2b23;border-radius:14px;padding:10px 16px;max-width:min(680px,94vw);font-size:16px}
.resume[hidden]{display:none}
.resume button{font:600 15px var(--sans);min-height:44px;border-radius:999px;border:1px solid #1a2b23;background:#1a2b23;color:#fff;padding:.4em 1.1em;cursor:pointer}
.resume button.licht{background:transparent;color:#1a2b23}
.lezer-fout{color:#fff;text-align:center;padding:24px 16px;font-size:17px}
/* Zoomvenster */
.zoom{padding:0;display:flex;flex-direction:column;overflow:hidden}
.zoom[hidden]{display:none}
.ztools{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:10px 12px;background:rgba(15,20,19,.96);border-bottom:1px solid rgba(255,255,255,.15)}
.ztools button{font:600 16px var(--sans);min-height:48px;min-width:48px;padding:.4em 1em;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.ztools button:hover{background:rgba(255,255,255,.25)}
.ztools button[disabled]{opacity:.35;cursor:default}
.ztools #zclose{position:static;background:#fff;color:#222;border:0}
.ztools #zpg{color:#fff;font-variant-numeric:tabular-nums;min-width:5.5em;text-align:center;font-size:17px}
.zscroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:14px 12px 40px}
.zbody{display:flex;justify-content:safe center;width:max-content;min-width:100%}
.zbody img{display:block;margin:0;max-width:none;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.zoom img{width:auto}
/* Telefoon: bediening onderaan vast in beeld, compacte kop */
@media(max-width:700px){
  .reader .rhead{padding-top:12px;padding-bottom:4px}
  .reader .rhead h1{font-size:22px!important}
  .reader .rhead .muted{display:none}
  .stage{padding-top:10px;padding-bottom:0;gap:10px}
  .bookwrap{max-width:min(100%,calc((100vh - 190px) * var(--r,1.55)))}
  .rbar{position:sticky;bottom:0;z-index:20;align-self:stretch;margin:0 -12px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(20,34,28,.97);border-top:1px solid rgba(255,255,255,.15);gap:6px 10px}
  .rbar #pg{min-width:5.5em}
  .rbar input[type=range]{width:100%}
  .rbar #fs{display:none}
  .rtip{padding-bottom:14px}
}
@supports (height:100dvh){@media(max-width:700px){.bookwrap{max-width:min(100%,calc((100dvh - 190px) * var(--r,1.55)))}}}
@media(max-width:900px) and (max-height:500px){
  .reader .rhead{display:none}
  .stage{padding-top:6px}
  .rbar{flex-wrap:nowrap}
  .rbar input[type=range]{order:0;flex:1;width:auto;min-width:80px}
  .rbar #zbtn{order:0}
}
@media(max-width:700px){
  .rbar{gap:4px 8px}
  .rbar button{min-height:46px;min-width:46px}
  .rbar #prev,.rbar #next{padding:.1em .7em}
  .rbar #zbtn{padding:.5em .9em;white-space:nowrap}
  .rbar #pg{min-width:4.8em;font-size:16px}
  .rbar input[type=range]{height:28px;margin:0}
}
@media(max-width:700px){
  .rbar{align-self:center;width:calc(100% + 24px);margin:0 -12px;box-sizing:border-box}
  .rbar #prev{order:1}.rbar #pg{order:2}.rbar #next{order:3}.rbar #zbtn{order:4}
  .rbar #pg{min-width:4.2em}
  .rbar #prev,.rbar #next{min-width:44px;padding:.1em .55em}
  .rbar #zbtn{padding:.5em .8em;font-size:14px}
}
.zoom{background:#0f1413}