:root{
  --red:#e2001a; --red-dark:#b30015;
  --bg:#0e0e10; --bar:#151517; --muted:#9a9aa2;
  --line:rgba(255,255,255,.09); --toolbar-h:56px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{
  background:var(--bg);color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden;-webkit-tap-highlight-color:transparent;
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
a.tbtn{text-decoration:none}

.toolbar{position:fixed;top:0;left:0;right:0;height:var(--toolbar-h);
  display:flex;align-items:center;gap:12px;padding:0 12px;
  background:var(--bar);border-bottom:1px solid var(--line);z-index:40;
  padding-top:env(safe-area-inset-top);height:calc(var(--toolbar-h) + env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;white-space:nowrap}
.brand .flame{width:14px;height:22px;background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M14 2c1 8-6 9-6 16 0 5 4 8 8 6 3-1.5 4-6 2-10 4 3 5 9 1 14-4 5-14 4-16-3-2-6 2-12 6-15 2-1.5 4-4 5-8z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M14 2c1 8-6 9-6 16 0 5 4 8 8 6 3-1.5 4-6 2-10 4 3 5 9 1 14-4 5-14 4-16-3-2-6 2-12 6-15 2-1.5 4-4 5-8z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat}
.brand small{font-weight:600;color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.brand .t{display:flex;flex-direction:column;line-height:1.05}
.spacer{flex:1}
.tbtn{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:9px;
  font-size:13px;font-weight:600;color:#e9e9ee;transition:background .15s}
.tbtn:hover{background:rgba(255,255,255,.08)}
.tbtn.on{background:rgba(226,0,26,.16);color:#fff}
.tbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.counter{font-variant-numeric:tabular-nums;font-size:13px;color:#e9e9ee;min-width:58px;text-align:center;
  display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border-radius:9px;transition:background .15s}
.counter:hover{background:rgba(255,255,255,.08)}
.counter svg{width:13px;height:13px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#tocBtn{background:rgba(226,0,26,.16);color:#fff}
#tocBtn:hover{background:rgba(226,0,26,.28)}
#archiveBtn svg{stroke-width:2.2}
@media(max-width:720px){
  .brand .t{display:none}
  .tbtn .lbl{display:none}
  #tocBtn .lbl{display:inline}      /* „Inhalt" bleibt am Handy sichtbar */
  .toolbar{gap:5px}.tbtn{padding:8px}#tocBtn{padding:8px 11px}
  .counter{min-width:0;padding:7px 8px}
}

.stage{position:absolute;top:calc(var(--toolbar-h) + env(safe-area-inset-top));left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;background:var(--bg)}
.stage img{display:block;max-width:100vw;max-height:100%;width:auto;height:auto;object-fit:contain;
  box-shadow:0 18px 50px rgba(0,0,0,.55);background:#fff;
  will-change:transform;transform-origin:center center;user-select:none;-webkit-user-drag:none}
.stage.animate img{transition:transform .22s ease}

.nav{position:fixed;top:50%;transform:translateY(-50%);z-index:30;width:50px;height:50px;border-radius:50%;
  background:rgba(20,20,22,.7);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;
  transition:background .15s,opacity .2s}
.nav:hover{background:var(--red)}
.nav svg{width:23px;height:23px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nav.prev{left:14px}.nav.next{right:14px}
.nav[disabled]{opacity:.22;pointer-events:none}
.nav.hide{opacity:0;pointer-events:none}
@media(max-width:720px){.nav{width:40px;height:40px}.nav.prev{left:5px}.nav.next{right:5px}}

.progress{position:fixed;left:0;bottom:0;height:3px;background:var(--red);z-index:35;transition:width .25s}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(380px,86vw);background:#161618;z-index:60;
  transform:translateX(-102%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:8px 0 40px rgba(0,0,0,.5)}
.drawer.open{transform:none}
.drawer .head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);padding-top:calc(18px + env(safe-area-inset-top))}
.drawer .head h2{margin:0;font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.drawer .head button{padding:6px;border-radius:8px}
.drawer .head button:hover{background:rgba(255,255,255,.08)}
.toc{overflow-y:auto;padding:8px 0 24px;-webkit-overflow-scrolling:touch}
.toc .sec{padding:16px 20px 6px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.toc a{display:flex;gap:12px;align-items:baseline;padding:10px 20px;color:#dcdce2;text-decoration:none;font-size:14px;transition:background .12s}
.toc a:hover{background:rgba(255,255,255,.06)}
.toc a.active{background:rgba(226,0,26,.14);color:#fff}
.toc a .pg{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px;min-width:34px}

.thumbs{position:fixed;left:0;right:0;bottom:0;z-index:38;
  background:linear-gradient(0deg,rgba(10,10,12,.97),rgba(10,10,12,.78));border-top:1px solid var(--line);
  display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));overflow-x:auto;
  transform:translateY(102%);transition:transform .26s;-webkit-overflow-scrolling:touch}
.thumbs.open{transform:none}
.thumbs img{height:68px;width:auto;border-radius:3px;opacity:.55;cursor:pointer;border:2px solid transparent;
  transition:opacity .15s,border-color .15s;background:#fff}
.thumbs img:hover{opacity:.85}
.thumbs img.active{opacity:1;border-color:var(--red)}

.hint{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:20;
  background:rgba(20,20,22,.82);padding:8px 15px;border-radius:20px;font-size:12.5px;color:#e4e4ea;
  transition:opacity .4s;pointer-events:none;text-align:center;max-width:90vw}
.loader{position:absolute;inset:0;display:grid;place-items:center;z-index:5}
.loader .sp{width:32px;height:32px;border:3px solid rgba(255,255,255,.18);border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.stage.animate img,.drawer,.thumbs,.scrim{transition:none}}