/*********************************************************
 * Couch & Agora – CSS Pack B: Reading Helpers / TOC / Audio
 *********************************************************/

/* Easy TOC */
.reading-wrap .ez-toc-container{
  margin:.8rem 0 1rem; background:var(--ca-bg-subtle);
  border:1px solid var(--ca-border-light); border-radius:8px;
  padding:.6rem .8rem; font-size:.95em; line-height:1.4;
}
.reading-wrap .ez-toc-title{ margin:0 0 .4rem; font-weight:600; }

/* Lesezeit / Banner */
.reading-meta{ margin:.35rem 0 .75rem; color:var(--ca-text-secondary); font-size:.95em; }
.cover-wrap .reading-meta, .reading-meta.meta--light{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45); }
.continue-banner{
  display:flex; gap:.6rem; align-items:center; background:var(--ca-bg-subtle);
  border:1px solid var(--ca-border-light); border-radius:8px; padding:.4rem .6rem; margin:0 0 .8rem;
  font-size:.92em; color:var(--ca-text-secondary);
}
.continue-banner a{ color:var(--ca-accent); text-decoration:none; border-bottom:1px dotted var(--ca-accent); }

/* Progress-Bar + Info-Pills */
#reading-progress{
  position:fixed; left:0; top:0; height:3px; width:0%; background:var(--ca-accent); z-index:10000;
  will-change:width;
}
body.admin-bar #reading-progress{ top:32px; }
@media (max-width:782px){ body.admin-bar #reading-progress{ top:46px; } }

#reading-info{
  position:fixed; left:8px; top:6px; z-index:10001; display:flex; gap:6px; align-items:center; font-size:12px;
}
#reading-info .pill{ background:rgba(17,17,17,.72); color:#fff; padding:.18rem .45rem; border-radius:999px; line-height:1; white-space:nowrap; }
#reading-info .pill.ri-next{ max-width:40vw; overflow:hidden; text-overflow:ellipsis; }
body.admin-bar #reading-info{ top:38px; }
@media (max-width:480px){
  #reading-info{ left:6px; top:6px; font-size:11px; }
  #reading-info .pill.ri-next{ max-width:56vw; }
}

/* Audio/PDF-Karte */
.reading-wrap .audio-card{
  margin:.9rem 0 1.1rem; background:var(--ca-panel);
  border:1px solid var(--ca-panel-border); border-radius:10px; padding:.6rem .8rem;
}
.reading-wrap .audio-card .aux-heading{
  display:block; margin:0 0 .5rem; font-weight:700; font-size:clamp(18px,2vw,22px); letter-spacing:.01em; color:var(--ca-text-primary);
}
.reading-wrap .audio-card audio{ width:100%; outline:none; margin:0 0 .6rem; }
.reading-wrap .audio-card .wp-block-file{ display:flex; align-items:center; gap:.6rem; margin:0 0 .4rem; font-size:.95em; }
.reading-wrap .audio-card .wp-block-file__button{
  padding:.35rem .7rem; border-radius:999px; background:var(--ca-accent); color:#fff; border:0; text-decoration:none; font-size:.9em; line-height:1;
  transition:filter .2s cubic-bezier(.4,0,.2,1), transform .05s cubic-bezier(.4,0,.2,1);
}
.reading-wrap .audio-card .wp-block-file__button:hover{ filter:brightness(.93); }
.reading-wrap .audio-card .wp-block-file__button:active{ transform:translateY(1px); }
/* A11y: Fokus auch für Textlink */
.reading-wrap .audio-card .wp-block-file a:not(.wp-block-file__button):focus-visible{ outline:2px solid var(--ca-accent); outline-offset:2px; }
.reading-wrap .audio-card .audio-note{ margin:0; color:var(--ca-text-secondary); font-size:.9em; opacity:.95; }

/* ==========================================================
   C&A Reading Stats - CSS Ergänzungen
   
   HINZUFÜGEN am Ende von: ca-reading.css CSS Pack B
   ========================================================== */

/* Stats in der .reading-meta Zeile */
.ca-stats {
  white-space: nowrap;
}

.ca-sep {
  opacity: 0.5;
}

.ca-visitors,
.ca-reading-time {
  cursor: help;
  border-bottom: 1px dotted currentColor;
  transition: opacity 0.15s ease;
}

.ca-visitors:hover,
.ca-reading-time:hover {
  opacity: 0.7;
}

/* Für Cover-Bilder (weiße Schrift) */
.reading-meta.meta--light .ca-stats,
.cover-wrap .reading-meta .ca-stats {
  color: inherit;
}

/* Responsive: Bei kleinen Screens Stats umbrechen */
@media (max-width: 480px) {
  .reading-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0;
  }
  .ca-stats {
    display: block;
    width: 100%;
  }
  .ca-stats .ca-sep:first-child {
    display: none;
  }
}

/* ==========================================================
   C&A Reading Analytics v2.0 COMPLETE - CSS Ergänzungen
   
   HINZUFÜGEN am Ende von: ca-reading.css CSS Pack B
   (ersetzt die vorherigen Stats-CSS-Ergänzungen)
   ========================================================== */

/* Stats in der .reading-meta Zeile */
.ca-stats {
  white-space: nowrap;
}

.ca-sep {
  opacity: 0.5;
}

.ca-visitors,
.ca-reading-time,
.ca-avg-depth {
  cursor: help;
  border-bottom: 1px dotted currentColor;
  transition: opacity 0.15s ease;
}

.ca-visitors:hover,
.ca-reading-time:hover,
.ca-avg-depth:hover {
  opacity: 0.7;
}

/* Für Cover-Bilder (weiße Schrift) */
.reading-meta.meta--light .ca-stats,
.cover-wrap .reading-meta .ca-stats {
  color: inherit;
}

/* ==========================================================
   Beliebtester Abschnitt
   ========================================================== */

.ca-top-section {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9em;
  opacity: 0.9;
}

.ca-top-label {
  opacity: 0.75;
}

.ca-top-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  transition: opacity 0.15s ease;
}

.ca-top-link:hover {
  opacity: 0.7;
}

/* Für Cover-Bilder (weiße Schrift) */
.reading-meta.meta--light .ca-top-section,
.cover-wrap .reading-meta .ca-top-section {
  color: #fff;
}

.reading-meta.meta--light .ca-top-link,
.cover-wrap .reading-meta .ca-top-link {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.5);
}

/* ==========================================================
   Responsive Anpassungen
   ========================================================== */

@media (max-width: 600px) {
  .reading-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0;
    line-height: 1.5;
  }
  
  .rm-lesezeit {
    display: block;
    width: 100%;
  }
  
  .ca-stats {
    display: block;
    width: 100%;
  }
  
  .ca-stats .ca-sep:first-child {
    display: none;
  }
  
  .ca-top-section {
    margin-top: 0.4rem;
  }
}

@media (max-width: 400px) {
  .ca-avg-depth {
    display: block;
    margin-top: 0.1rem;
  }
  
  .ca-top-section {
    font-size: 0.85em;
  }
}