/* ===== Seiten-Notizbereich (rechts neben der PDF) ===== */
:root{--snw:400px}
#snotes{position:fixed;right:0;top:var(--top);bottom:0;width:var(--snw);background:var(--bg2);border-left:1px solid #000;display:flex;flex-direction:column;z-index:21;transform:translateX(100%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s}
body.sn #snotes{transform:none;visibility:visible;transition:transform .22s ease}
body.sn #wrap{right:var(--snw);transition:right .22s ease}
body.sn #pageInd{left:calc(50% - var(--snw)/2)}body.sn.side #pageInd{left:calc(50% + (var(--side) - var(--snw))/2)}
body.lib #snotes{display:none!important}
#snres{position:absolute;left:-5px;top:0;bottom:0;width:10px;cursor:col-resize;touch-action:none}
#snotes .hd{display:flex;align-items:center;gap:8px;padding:10px 12px;color:#fff}#snotes .hd b{flex:1;font-size:15px}
#snotes .hd button,#snotes .tl button,#snotes select,#snotes input[type=number]{background:#333;color:#eee;border:1px solid #444;border-radius:9px;height:32px;padding:0 9px;font-size:13px}
#snotes .tl{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px;align-items:center}
#snotes .tl input[type=color]{width:32px;height:32px;border:1px solid #444;border-radius:9px;background:#333;padding:2px}
#snotes .tl label{font-size:11px;color:var(--mu);display:flex;align-items:center;gap:4px}
#snpg{font-size:12px;color:var(--mu);padding:0 12px 6px}#snst{font-size:11px;color:var(--mu);padding:4px 12px}
#snbox{position:relative;flex:1;margin:0 12px 6px;display:flex;min-height:80px}#snc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;touch-action:none;border-radius:12px}#snbox.ink #snc{pointer-events:auto;cursor:crosshair}#snbox.ink #sntx{pointer-events:none}#snInk label{font-size:11px;color:var(--mu);display:flex;align-items:center;gap:4px}#snInk button.on{background:var(--ac);color:#fff;border-color:var(--ac)}#snInk input[type=color]{width:32px;height:32px;border:1px solid #444;border-radius:9px;background:#333;padding:2px}
#sntx{flex:1;margin:0;border:0;border-radius:12px;padding:14px 16px;resize:none;outline:none;font:16px/28px "Segoe UI",sans-serif;tab-size:4;background-repeat:repeat}
#sntx.L-punkte{background-image:radial-gradient(circle,#0003 1.2px,transparent 1.6px);background-size:var(--lh,28px) var(--lh,28px)}
#sntx.L-kariert{background-image:linear-gradient(#0002 1px,transparent 1px),linear-gradient(90deg,#0002 1px,transparent 1px);background-size:var(--lh,28px) var(--lh,28px)}
#sntx.L-liniert,#sntx.L-stichpunkte,#sntx.L-check{background-image:linear-gradient(transparent calc(var(--lh,28px) - 1px),#0003 calc(var(--lh,28px) - 1px));background-size:100% var(--lh,28px);background-attachment:local}
#sntx.L-cornell{background-image:linear-gradient(90deg,transparent 108px,#d33a 108px,#d33a 110px,transparent 110px),linear-gradient(transparent calc(var(--lh,28px) - 1px),#0003 calc(var(--lh,28px) - 1px));background-size:100% 100%,100% var(--lh,28px);background-attachment:local;padding-left:124px}
#sntx.L-spalten{column-count:2;column-gap:28px}
@media(max-width:760px){#snotes{left:0;width:auto;top:auto;height:45vh}body.sn #wrap{right:0;bottom:45vh}}

#snotes .hd{padding:10px 12px}#snView{flex:1;display:flex;background:#101010;border-radius:12px;padding:3px}#snView button{flex:1;height:34px;border-radius:10px;color:#bbb;font-size:13px;background:none;border:0}#snView button.on{background:#2e2e2e;color:#fff}
#snPage{display:flex;flex-direction:column;flex:1;min-height:0}#snPage[hidden],#snAll[hidden],#snInk[hidden],#snFmt[hidden]{display:none}
.seg2{display:flex;margin:0 12px 8px;gap:6px}.seg2 button{flex:1;height:38px;border-radius:11px;background:#333;color:#ddd;border:1px solid #444;font-size:14px}.seg2 button.on{background:var(--ac);border-color:var(--ac);color:#fff}
#snotes .grp{margin:0 12px 8px;padding:8px 10px;background:#2b2b2b;border:1px solid #3a3a3a;border-radius:12px}#snotes .gl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mu);margin-bottom:6px}
#snotes .gr{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}#snotes .gr:last-child{margin-bottom:0}
#snotes .gr button,#snotes .gr select,#snotes .gr input[type=number],#snotes .gr input[type=search]{background:#333;color:#eee;border:1px solid #444;border-radius:9px;height:32px;padding:0 9px;font-size:13px}
#snotes .gr.tools button{flex:1;white-space:nowrap}#snotes .gr button.on{background:var(--ac);border-color:var(--ac);color:#fff}
#snotes .gr input[type=color]{width:34px;height:32px;border:1px solid #444;border-radius:9px;background:#333;padding:2px}#snotes .gr label{font-size:12px;color:var(--mu);display:flex;align-items:center;gap:4px}
#snAll{flex:1;min-height:0;display:flex;flex-direction:column}#snList{flex:1;overflow:auto;padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.snit{display:flex;gap:10px;align-items:flex-start;background:#2b2b2b;border:1px solid #3a3a3a;border-radius:12px;padding:10px 12px;cursor:pointer;text-align:left;width:100%;color:#eee}.snit:hover{border-color:var(--ac)}
.snit .pg{flex:none;min-width:54px;text-align:center;background:var(--acbg);border:1px solid var(--ac);border-radius:9px;padding:4px 6px;font-size:12px;font-weight:600}.snit .tx{flex:1;min-width:0;font-size:13px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:pre-wrap;word-break:break-word}
.snit .mt{font-size:11px;color:var(--mu);margin-top:3px}.snempty{color:var(--mu);font-size:13px;padding:20px 8px;text-align:center}