/* KZ Story Reader Test 0.1 */
.kzsr-active{
  --kzsr-reading-width: 710px;
  --kzsr-copy-size: 19px;
  --kzsr-copy-line: 1.84;
  --kzsr-rule: rgba(255,255,255,.11);
  --kzsr-muted: rgba(255,255,255,.57);
  --kzsr-panel: rgba(10,10,10,.96);
  --kzsr-accent: #8c0a0a;
}

/* Fortschritt */
#kzsr-progress{
  position:fixed;
  top:0;left:0;right:0;
  height:2px;
  z-index:99999;
  pointer-events:none;
  background:rgba(255,255,255,.06);
}
#kzsr-progress > i{
  display:block;
  height:100%;
  width:0;
  background:var(--kzsr-accent);
  transition:width .08s linear;
}
#kzsr-progress-label{
  position:fixed;
  right:15px;
  bottom:14px;
  z-index:9998;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(5,5,5,.84);
  backdrop-filter:blur(8px);
  font-size:11px;
  letter-spacing:.08em;
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
}
.kzsr-scrolling #kzsr-progress-label{opacity:.66}

/* Longform */
.kzsr-focus .kzgs22-prose,
.kzsr-focus .kzgt-prose{
  max-width:var(--kzsr-reading-width)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  font-size:var(--kzsr-copy-size)!important;
  line-height:var(--kzsr-copy-line)!important;
  letter-spacing:.003em;
}
.kzsr-focus .kzgs22-prose p,
.kzsr-focus .kzgt-prose p{
  margin:0 0 1.48em!important;
}
.kzsr-focus .kzgs22-prose > p:first-of-type,
.kzsr-focus .kzgt-prose > p:first-of-type{
  font-size:1.06em;
}
.kzsr-focus .kzgs22-prose h2,
.kzsr-focus .kzgt-prose h2{
  margin:2.65em 0 .75em!important;
  line-height:1.08;
}
.kzsr-focus .kzgs22-prose h3,
.kzsr-focus .kzgt-prose h3{
  margin:2.2em 0 .7em!important;
}

/* Reader-Toolbar */
.kzsr-toolbar{
  max-width:var(--kzsr-reading-width);
  margin:0 auto 24px;
  padding:10px 0 15px;
  border-bottom:1px solid var(--kzsr-rule);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.kzsr-reading-time{opacity:.58}
.kzsr-toc-button{
  appearance:none;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  cursor:pointer;
  opacity:.75;
  padding:4px 0;
}
.kzsr-toc-button:hover{opacity:1}

/* Abschnittsmarken */
.kzsr-section{
  position:relative;
  padding-top:7px;
}
.kzsr-section:before{
  content:attr(data-kzsr-section);
  display:block;
  margin-bottom:9px;
  font-size:10px;
  line-height:1;
  letter-spacing:.2em;
  font-weight:700;
  color:var(--kzsr-muted);
}
.kzsr-section:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:34px;
  height:1px;
  background:var(--kzsr-accent);
}

/* TOC Drawer */
#kzsr-toc{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%) translateX(115%);
  width:min(330px,calc(100vw - 36px));
  max-height:min(70vh,650px);
  overflow:auto;
  z-index:99998;
  background:var(--kzsr-panel);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 20px 55px rgba(0,0,0,.42);
  transition:transform .22s ease;
}
#kzsr-toc.is-open{transform:translateY(-50%) translateX(0)}
.kzsr-toc-head{
  position:sticky;
  top:0;
  z-index:2;
  background:#090909;
  border-bottom:1px solid var(--kzsr-rule);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:15px 16px;
}
.kzsr-toc-head strong{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.kzsr-toc-close{
  color:inherit;
  border:0;background:none;
  cursor:pointer;
  opacity:.65;
}
.kzsr-toc-list{padding:9px 8px 12px}
.kzsr-toc-list a{
  display:grid;
  grid-template-columns:31px 1fr;
  gap:7px;
  padding:10px 9px;
  border-bottom:1px solid rgba(255,255,255,.055);
  color:inherit;
  text-decoration:none;
  line-height:1.35;
}
.kzsr-toc-list a:hover{background:rgba(255,255,255,.04)}
.kzsr-toc-list span{font-size:10px;opacity:.38;padding-top:2px}
.kzsr-toc-list strong{font-size:13px;font-weight:600}

/* Album: Lesezeit direkt am Akkordeon */
.kzsr-album-meta{
  max-width:var(--kzsr-reading-width);
  margin:-2px auto 10px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.5;
}

/* Navigation am Ende ruhiger absetzen */
.kzsr-active .kzgs22-next,
.kzsr-active .kzgt-next{
  margin-top:70px!important;
  padding-top:25px!important;
}

/* Auswahl */
.kzsr-active .kzgs22-prose ::selection,
.kzsr-active .kzgt-prose ::selection{
  background:rgba(140,10,10,.62);
  color:#fff;
}

@media(max-width:780px){
  .kzsr-active{--kzsr-copy-size:17.5px;--kzsr-copy-line:1.8}
  #kzsr-toc{
    left:12px;right:12px;
    top:auto;bottom:12px;
    width:auto;
    max-height:62vh;
    transform:translateY(115%);
  }
  #kzsr-toc.is-open{transform:translateY(0)}
  .kzsr-toolbar{margin-bottom:18px}
  #kzsr-progress-label{display:none}
}


/* 0.1.1 – Lesedauer in Album-/Timeline-Übersichten */
.kzsr-overview-time{
  max-width:var(--kzsr-reading-width,710px);
  margin:0 auto 18px;
  font-size:11px;
  line-height:1.55;
  letter-spacing:.075em;
  text-transform:uppercase;
  color:rgba(255,255,255,.56);
}
.kzsr-overview-time strong{
  color:rgba(255,255,255,.82);
  font-weight:650;
}
.kzsr-overview-time--detail{
  padding:10px 0 14px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.kzsr-overview-time--detail > span{
  margin:0 5px;
  opacity:.35;
}
@media(max-width:680px){
  .kzsr-overview-time--detail{
    display:flex;
    flex-wrap:wrap;
    gap:5px 8px;
  }
  .kzsr-overview-time--detail > span{display:none}
}

/* 0.1.2 – Gesamtlesezeit in der großen Albumkarte */
.kzsr-card-total{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:12px;
  row-gap:2px;
  width:max-content;
  max-width:100%;
  margin:22px 0 20px;
  padding:9px 12px 9px 11px;
  border-left:2px solid var(--kzsr-accent,#8c0a0a);
  background:rgba(255,255,255,.025);
}
.kzsr-card-total>span{
  grid-column:1;
  grid-row:1/3;
  align-self:center;
  font-size:9px;
  line-height:1.2;
  letter-spacing:.16em;
  color:rgba(255,255,255,.42);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}
.kzsr-card-total>strong{
  grid-column:2;
  font-size:15px;
  line-height:1.2;
  letter-spacing:.035em;
  color:rgba(255,255,255,.88);
}
.kzsr-card-total>small{
  grid-column:2;
  font-size:10px;
  line-height:1.35;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:rgba(255,255,255,.43);
}
@media(max-width:680px){
 .kzsr-card-total{margin:16px 0;padding:8px 10px}
 .kzsr-card-total>strong{font-size:14px}
}

/* 0.1.4 – Kapitel-Lesedauer nur in Vorschauen */
.kzsr-preview-time{
 display:block;
 margin:0 0 8px;
 font-size:10px;
 line-height:1.3;
 letter-spacing:.12em;
 text-transform:uppercase;
 color:rgba(255,255,255,.46);
}

/* 0.1.5 – korrigierte, kompakte Timeline-Metazeile */
.kzsr-card-total{
 display:block!important;
 width:max-content;
 max-width:100%;
 margin:16px 0 18px!important;
 padding:8px 11px!important;
 border-left:2px solid var(--kzsr-accent,#8c0a0a);
 background:rgba(255,255,255,.025);
}
.kzsr-card-total>strong{
 display:block;
 font-size:12px!important;
 line-height:1.35;
 letter-spacing:.055em;
 text-transform:uppercase;
 color:rgba(255,255,255,.82);
}
.kzsr-card-total>small{
 display:block;
 margin-top:3px;
 font-size:9px!important;
 line-height:1.35;
 letter-spacing:.07em;
 text-transform:uppercase;
 color:rgba(255,255,255,.42);
}


/* 0.1.6 – Nach oben */
#kzsr-back-top{
  position:fixed;
  right:16px;
  bottom:52px;
  z-index:9997;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.13);
  border-radius:2px;
  background:rgba(5,5,5,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:rgba(255,255,255,.72);
  font:500 18px/1 sans-serif;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(7px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease,border-color .18s ease,color .18s ease;
}
#kzsr-back-top:hover,
#kzsr-back-top:focus-visible{
  color:#fff;
  border-color:rgba(140,10,10,.72);
  outline:none;
}
#kzsr-back-top.is-visible{
  opacity:.72;
  visibility:visible;
  transform:translateY(0);
}
#kzsr-back-top.is-visible:hover{opacity:1}
@media(max-width:780px){
  #kzsr-back-top{
    right:12px;
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    width:35px;
    height:35px;
    font-size:17px;
  }
}
@media(prefers-reduced-motion:reduce){
  #kzsr-back-top{transition:none}
}


/* 0.1.7 – Track hören direkt am Einstieg der Trackgeschichte */
.kzsr-listen-top{
  max-width:var(--kzsr-reading-width,710px);
  margin:0 auto 22px;
  padding:10px 0 12px;
  border-bottom:1px solid rgba(255,255,255,.09);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.kzsr-listen-top>span{
  font-size:9px;
  line-height:1;
  letter-spacing:.18em;
  color:rgba(255,255,255,.38);
}
.kzsr-listen-top>a{
  color:rgba(255,255,255,.82);
  font-size:11px;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
}
.kzsr-listen-top>a:hover,
.kzsr-listen-top>a:focus-visible{
  color:#fff;
  text-decoration:none;
}