/* Blätterwerk Viewer – eigenständig, für iframe und Vollbild. */
html,body{height:100%;margin:0}
body.fv{background:var(--fv-bg,#15161a);color:#e8e9ef;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow:hidden;-webkit-tap-highlight-color:transparent}
.fv *{box-sizing:border-box}
.fv button{font:inherit}
.fv-app{position:fixed;inset:0;display:flex;flex-direction:column}
.fv-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:18px 54px}
@media (max-width:640px){.fv-stage{padding:10px 8px}}
.fv-book-wrap{position:relative;display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%}
.fv-book{position:relative}
.fv-book.is-ready{filter:drop-shadow(0 24px 40px rgba(0,0,0,.45))}
.page{background:#fff;overflow:hidden;user-select:none;-webkit-user-select:none}
.page img{display:block;width:100%;height:100%;object-fit:contain;background:#fff;pointer-events:none}
.page .fv-ph{position:absolute;inset:0;background:linear-gradient(110deg,#f1f1f3 20%,#fafafa 40%,#f1f1f3 60%);background-size:200% 100%;animation:fvShimmer 1.4s infinite linear}
@keyframes fvShimmer{from{background-position:120% 0}to{background-position:-80% 0}}
.page.--hard{background:#f7f7f7}
.page.--hard img{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.fv-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:0;border-radius:12px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,opacity .2s;backdrop-filter:blur(6px)}
.fv-arrow:hover{background:rgba(255,255,255,.2)}
.fv-arrow svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fv-prev{left:6px}.fv-next{right:6px}
.fv-arrow[disabled]{opacity:.15;cursor:default}
@media (max-width:640px),(pointer:coarse){.fv-arrow{display:none}}
.fv-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .3s}
.fv-loading span{width:38px;height:38px;border:3px solid rgba(255,255,255,.15);border-top-color:#ff5a1f;border-radius:50%;animation:fvSpin 1s linear infinite}
@keyframes fvSpin{to{transform:rotate(360deg)}}
.fv-loading.off{opacity:0}
.fv-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;font-size:.8rem;padding:7px 14px;border-radius:999px;pointer-events:none;opacity:0;transition:opacity .4s;white-space:nowrap}
.fv-hint.on{opacity:1}

/* Leiste */
.fv-bar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(10,11,16,.72);backdrop-filter:saturate(1.3) blur(14px);border-top:1px solid rgba(255,255,255,.06);min-height:54px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
.fv-group{display:flex;align-items:center;gap:2px}
.fv-bar button,.fv-bar a{width:38px;height:38px;border:0;border-radius:10px;background:transparent;color:#dcdfea;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:background .15s,color .15s}
.fv-bar button:hover,.fv-bar a:hover,.fv-bar button.on{background:rgba(255,255,255,.12);color:#fff}
.fv-bar svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fv-pageinput{display:inline-flex;align-items:center;gap:4px;margin:0 6px;font-size:.9rem;color:#9ea2b3;font-variant-numeric:tabular-nums}
.fv-pageinput input{width:4.6em;text-align:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#fff;padding:6px 4px;font:inherit;font-size:.9rem}
.fv-pageinput input:focus{outline:0;border-color:#ff5a1f}
.fv-title{flex:1;min-width:0;text-align:center;font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#cfd2dd}
@media (max-width:720px){.fv-title{display:none}.fv-bar{justify-content:space-between}}
@media (max-width:420px){.fv-bar button[data-act=first],.fv-bar button[data-act=last]{display:none}}

/* Miniaturen */
.fv-thumbs{flex:0 0 auto;background:rgba(10,11,16,.85);border-top:1px solid rgba(255,255,255,.06);padding:10px 12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.fv-thumbs-in{display:flex;gap:10px;align-items:flex-end;width:max-content}
.fv-thumb{position:relative;flex:0 0 auto;height:92px;border:0;padding:0;background:#222;border-radius:4px;overflow:hidden;cursor:pointer;opacity:.75;transition:opacity .15s,transform .15s;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.fv-thumb img{display:block;height:100%;width:auto;background:#fff}
.fv-thumb:hover{opacity:1}
.fv-thumb.on{opacity:1;outline:2px solid #ff5a1f;outline-offset:1px;transform:translateY(-2px)}
.fv-thumb span{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.55);color:#fff;font-size:.68rem;text-align:center;padding:2px 0}
.fv-thumb .fv-ph{position:absolute;inset:0}

/* Suchfeld */
.fv-panel{position:absolute;top:12px;left:12px;width:min(360px,calc(100% - 24px));max-height:calc(100% - 90px);background:rgba(16,17,24,.94);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;z-index:5}
.fv-panel-head{display:flex;gap:6px;padding:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.fv-panel-head input{flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:9px;color:#fff;padding:9px 12px;font:inherit}
.fv-panel-head input:focus{outline:0;border-color:#ff5a1f}
.fv-panel-head button{width:38px;border:0;border-radius:9px;background:transparent;color:#cfd2dd;cursor:pointer}
.fv-results{overflow-y:auto;padding:6px;font-size:.88rem}
.fv-results p{margin:10px;color:#9ea2b3}
.fv-muted{color:#9ea2b3}
.fv-res{display:block;width:100%;text-align:left;background:transparent;border:0;color:#e8e9ef;padding:9px 10px;border-radius:9px;cursor:pointer;line-height:1.4}
.fv-res:hover{background:rgba(255,255,255,.08)}
.fv-res b{display:inline-block;background:#ff5a1f;color:#fff;font-size:.72rem;border-radius:6px;padding:1px 7px;margin-right:6px;font-weight:700}
.fv-res mark{background:#ffd8c7;color:#7c2d12;border-radius:3px;padding:0 2px}

/* Zoom */
.fv-zoom{position:absolute;inset:0;background:rgba(8,9,14,.96);z-index:8;display:flex;flex-direction:column}
.fv-zoom-view{flex:1;position:relative;overflow:hidden;cursor:grab;touch-action:none}
.fv-zoom-view.drag{cursor:grabbing}
.fv-zoom-inner{position:absolute;top:0;left:0;display:flex;gap:0;transform-origin:0 0;will-change:transform}
.fv-zoom-inner img{display:block;height:100%;width:auto;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.fv-zoom-bar{display:flex;justify-content:center;align-items:center;gap:6px;padding:8px;background:rgba(10,11,16,.8);border-top:1px solid rgba(255,255,255,.06);padding-bottom:max(8px,env(safe-area-inset-bottom))}
.fv-zoom-bar button{min-width:40px;height:38px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center;padding:0 10px}
.fv-zoom-bar button:hover{background:rgba(255,255,255,.18)}
.fv-zoom-bar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fv-zoom-bar span{min-width:60px;text-align:center;font-size:.85rem;color:#cfd2dd;font-variant-numeric:tabular-nums}

/* Hinweise */
.fv-toast{position:absolute;left:50%;bottom:70px;transform:translate(-50%,10px);background:#fff;color:#0f1222;font-size:.85rem;font-weight:600;padding:9px 14px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:9;white-space:nowrap}
.fv-toast.on{opacity:1;transform:translate(-50%,0)}
.fv-badge{position:absolute;right:10px;top:10px;font-size:.72rem;color:#cfd2dd;text-decoration:none;background:rgba(0,0,0,.45);padding:5px 10px;border-radius:999px;backdrop-filter:blur(6px);z-index:4;opacity:.85}
.fv-badge:hover{opacity:1;color:#fff}
.fv-badge strong{color:#ff8a5c}

/* Das hidden-Attribut gewinnt gegen display:flex der Overlays. */
.fv [hidden]{display:none!important}
.fv-loading.off{visibility:hidden}