:root{
  --red:#b81d25; --green:#89a924; --blue:#7b90b9; --anth:#3d3e3c; --bg:#e8e9e8;
  --glass:rgba(255,255,255,.92); --shadow:0 2px 12px rgba(0,0,0,.16);
  --nh:0px;   /* Höhe der Hinweiszeile (setzt viewer.js) */
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--anth);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;overflow:hidden}
svg{width:22px;height:22px;display:block}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:10px;top:-60px;z-index:100;background:var(--anth);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none}
.skip:focus{top:10px}
/* deutlich sichtbarer Tastaturfokus */
:focus-visible{outline:3px solid var(--blue)!important;outline-offset:2px;box-shadow:0 0 0 5px #fff}
.page .lnk:focus-visible,.zoom-inner .lnk:focus-visible{background:rgba(123,144,185,.35)}
h2{font-size:16px;margin:0}

/* Katalog füllt das ganze Fenster (Größe = 99 % per JS) */
.stage{position:fixed;inset:0;bottom:var(--nh);display:flex;align-items:center;justify-content:center}

/* Hinweiszeile unten (immer sichtbar, Katalog wird darüber eingepasst) */
.notice{position:fixed;left:0;right:0;bottom:0;z-index:15;background:#fff;border-top:3px solid var(--green);
  padding:7px 16px calc(7px + env(safe-area-inset-bottom));text-align:center;font-size:14px;line-height:1.4}
.notice p{margin:0}
.notice a{color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.notice a:hover{color:var(--anth)}
.book-wrap{position:relative}
.page{background:#fff}
.page img{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.page .lnk,.zoom-inner .lnk{position:absolute;display:block;border-radius:2px;transition:background .15s}
.page .lnk,.zoom-inner .lnk{z-index:2}
.tl{position:absolute;inset:0;pointer-events:none}
.tl svg{display:block;width:100%;height:100%}
.page .lnk:hover,.zoom-inner .lnk:hover{background:rgba(123,144,185,.28);outline:1px solid var(--blue)}

/* Schwebende Bedienelemente */
.hud{position:fixed;z-index:20;transition:opacity .35s}
body.idle .hud{opacity:0;pointer-events:none}
.hud-brand{top:10px;left:10px;max-width:calc(100% - 300px);display:flex;align-items:center;gap:10px;
  background:var(--glass);border-left:4px solid var(--red);border-radius:8px;padding:6px 14px 6px 10px;box-shadow:var(--shadow)}
.hud-brand img{height:32px;width:auto;display:block}
.hud-brand .txt{min-width:0;line-height:1.2}
.hud-brand .title{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-brand .sub{font-size:12px;color:#5d5e5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-tools{top:10px;right:10px;display:flex;gap:2px;background:var(--glass);border-radius:10px;padding:3px;box-shadow:var(--shadow)}
.hud-pager{bottom:calc(10px + var(--nh));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;
  background:var(--glass);border-radius:10px;padding:3px 6px;box-shadow:var(--shadow)}

.hud-tools button,.hud-tools a,.hud-pager button,.zoom-tools button,.close,.searchform button{
  border:0;background:transparent;color:var(--anth);width:40px;height:40px;border-radius:8px;
  display:grid;place-items:center;cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.hud-tools button:hover,.hud-tools a:hover,.hud-pager button:hover,.zoom-tools button:hover,.close:hover{background:#efefee;color:var(--red)}
.hud-tools button.active{background:var(--red);color:#fff}
/* Ton-Button: Lautsprecher bzw. durchgestrichen */
#btnSound .ic-off,#btnSound.off .ic-on{display:none}
#btnSound.off .ic-off{display:block}

.nav{position:fixed;top:50%;transform:translateY(-50%);z-index:21;width:52px;height:52px;border-radius:50%;
  border:0;background:var(--glass);color:var(--anth);box-shadow:var(--shadow);cursor:pointer;
  display:grid;place-items:center;transition:background .15s,color .15s,opacity .35s}
.nav svg{width:26px;height:26px}
.nav:hover{background:var(--red);color:#fff}
.nav:disabled{opacity:0!important;pointer-events:none}
.nav-prev{left:10px}.nav-next{right:10px}

.pageinfo{display:flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap}
.pageinfo input{width:70px;height:30px;text-align:center;border:1px solid #c9cac8;border-radius:6px;
  font:inherit;color:var(--anth);background:#fff}
.pageinfo input:focus{outline:2px solid var(--blue);border-color:transparent}

.panel{position:fixed;top:0;bottom:0;right:0;width:min(380px,100%);background:#fff;z-index:30;
  box-shadow:-4px 0 20px rgba(0,0,0,.15);display:flex;flex-direction:column;border-top:4px solid var(--red)}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 16px;border-bottom:1px solid #e3e3e2}
.thumbs{overflow:auto;padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.thumb{border:0;padding:0;background:none;cursor:pointer;text-align:center;font-size:12px;color:var(--anth)}
.thumb img{width:100%;display:block;background:#f4f4f4;border:2px solid transparent;border-radius:3px}
.thumb.current img{border-color:var(--red)}
.thumb:hover img{border-color:var(--blue)}
.searchform{display:flex;gap:6px;padding:12px 12px 6px}
.searchform input{flex:1;height:40px;border:1px solid #c9cac8;border-radius:8px;padding:0 12px;font:inherit}
.searchform input:focus{outline:2px solid var(--blue);border-color:transparent}
.searchform button{background:var(--red);color:#fff}
.results{overflow:auto;padding:6px 12px 16px}
.results .info{font-size:14px;color:#6b6c6a;padding:6px 2px}
.hit{display:block;width:100%;text-align:left;border:0;background:none;padding:10px;border-radius:8px;
  cursor:pointer;font:inherit;font-size:14px;line-height:1.4;color:var(--anth);border-bottom:1px solid #eee}
.hit:hover{background:#f3f4f7}
.hit b{color:var(--red);font-weight:700}
.hit mark{background:rgba(137,169,36,.3);color:inherit;padding:0 1px;border-radius:2px}
.panel-wide{width:min(620px,100%)}
.head-tools{display:flex;gap:2px}
.head-tools button:not(.close){border:0;background:transparent;color:var(--anth);min-width:40px;height:40px;border-radius:8px;
  cursor:pointer;font:inherit;font-weight:700;font-size:15px}
.head-tools button:not(.close):hover{background:#efefee;color:var(--red)}
.textview{overflow:auto;padding:8px 24px 32px;font-size:var(--fs,18px);line-height:1.6}
.textview h3{font-size:1.1em;color:var(--red);margin:1.4em 0 .4em;border-bottom:2px solid #eee;padding-bottom:4px}
.textview p{margin:0 0 .8em}
.textview h4{font-size:.95em;margin:1em 0 .3em}
.textview ul{margin:0 0 1em;padding-left:1.2em}
.textview a{color:#1d4f91;word-break:break-all}
.textview .empty{color:#6b6c6a;font-style:italic}
.textview .imgalt{font-style:italic;color:#4a4b49;border-left:3px solid var(--green);padding-left:10px}
.textview .imgalt span{font-style:normal;font-weight:700;color:var(--anth)}

/* Zoom / Lesemodus */
.zoom{position:fixed;inset:0;background:var(--bg);z-index:50}
.zoom-scroll{position:absolute;inset:0;overflow:auto;cursor:grab;-webkit-overflow-scrolling:touch}
.zoom-scroll.drag{cursor:grabbing}
.zoom-inner{display:flex;margin:0 auto;padding:12px;width:max-content}
.zoom-inner .zp{position:relative;background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.12)}
.zoom-inner .zp img{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.zoom-tools{position:fixed;top:10px;right:10px;z-index:2;display:flex;align-items:center;gap:2px;
  background:var(--glass);border-radius:10px;padding:3px;box-shadow:var(--shadow)}
.zpage{font-size:14px;padding:0 10px;white-space:nowrap}
.zoom .nav{z-index:3}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media (max-width:700px){
  .hud-brand{max-width:calc(100% - 20px);top:auto;bottom:calc(62px + var(--nh));left:10px}
  .hud-brand img{height:26px}
  .hud-tools{left:10px;right:10px;justify-content:space-between}
  /* Vor/Zurück auf dem Handy unten links/rechts neben der Seitenanzeige */
  .nav{top:auto;bottom:calc(10px + var(--nh));transform:none;width:46px;height:46px}
  .zoom .nav{bottom:10px}
  .notice{font-size:13px;padding-left:10px;padding-right:10px}
  .nav-prev{left:10px}.nav-next{right:10px}
}