/* ============================================================
   FRANKFURT 2042 — Reader v2 „AUTO"
   Voll responsiv, keine Leser-Einstellungen nötig.
   Moderne, mobil bewährte Techniken:
   - Fluide Typografie via clamp() (skaliert stufenlos 320px → 4K)
   - Zeilenmaß in ch (optimale Lesbarkeit auf jeder Breite)
   - dvh + env(safe-area-inset-*) für iOS/Android-Notches
   - Touch-Targets ≥ 44px, TOC als Scroll-Snap-Chips auf Mobil
   Lädt NACH site.css → überschreibt gezielt die alten
   Komfort-Regeln (--r-fs / data-rw werden neutralisiert).
   ============================================================ */

/* ---------- Alte manuelle Modi neutralisieren ---------- */
html .reader-prose,
html[data-rw="narrow"] .reader-prose,
html[data-rw="normal"] .reader-prose,
html[data-rw="wide"] .reader-prose{
  max-width:min(66ch, 100%);
  font-size:clamp(1.0625rem, 0.98rem + 0.45vw, 1.25rem); /* ~17px → 20px */
  line-height:1.75;
}

/* ---------- Lesefluss ---------- */
.reader-prose{
  margin:0 auto;
  padding:0.5rem 0 2rem;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  hyphens:auto;
  overflow-wrap:break-word;
}
.reader-prose p{
  margin:0 0 1.1em;
  text-wrap:pretty;
}
.reader-prose h1, .reader-prose h2, .reader-prose h3{
  text-wrap:balance;
  line-height:1.25;
  margin:1.6em 0 .6em;
  font-size:clamp(1.25rem, 1.1rem + 1vw, 1.75rem);
}
.reader-content > h1{
  font-size:clamp(1.5rem, 1.2rem + 1.8vw, 2.4rem);
  line-height:1.15;
  text-wrap:balance;
}
.reader-content .chapter > h2{
  font-size:clamp(1.2rem, 1.05rem + 1vw, 1.7rem);
  text-wrap:balance;
}

/* Bilder & Medien im Kapiteltext: nie überlaufen, immer sichtbar */
#reader img, #reader video, #reader figure{
  max-width:100%;
  height:auto;
  display:block;
  margin:1.4rem auto;
}
#reader figure{ text-align:center; }
#reader figcaption{ font-size:.85em; opacity:.7; margin-top:.4rem; }
#reader table{ display:block; max-width:100%; overflow-x:auto; }

/* ---------- Layout: Desktop Sidebar → Mobil einspaltig ---------- */
.reader-layout{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:2rem;
  padding:1.5rem 0 2rem;
}
@media (max-width: 900px){
  .reader-layout{
    grid-template-columns:1fr;
    gap:1rem;
  }
}

/* ---------- Inhaltsverzeichnis ---------- */
@media (max-width: 900px){
  /* Mobil: horizontale Kapitel-Chips mit Scroll-Snap (bewährtes Mobile-Pattern) */
  .reader-toc{ padding:0; }
  .reader-toc h3{
    font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
    opacity:.7; margin:0 0 .5rem;
  }
  .reader-toc ul{
    display:flex;
    gap:.5rem;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:.1rem .1rem .6rem;
    margin:0;
    list-style:none;
  }
  .reader-toc ul::-webkit-scrollbar{ display:none; }
  .reader-toc li{ flex:0 0 auto; scroll-snap-align:start; margin:0; }
  .reader-toc a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:.45rem 1rem;
    border:1px solid color-mix(in srgb, var(--theme-accent, #ff6600) 35%, transparent);
    border-radius:999px;
    white-space:nowrap;
    font-size:.9rem;
    text-decoration:none;
  }
  .reader-toc a.active{
    background:var(--theme-accent, #ff6600) !important;
    color:var(--theme-bg, #0a0a0a) !important;
    border-color:var(--theme-accent, #ff6600);
  }
}

/* ---------- Toolbar: nur noch Navigation, sticky mit Safe-Area ---------- */
.reader-toolbar{
  position:sticky;
  top:calc(56px + env(safe-area-inset-top, 0px));
  z-index:10;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
  padding:.5rem;
}
.reader-toolbar .rt-group{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* Buttons im Reader: garantiert sichtbare Beschriftung + Touch-Größe */
.reader-toolbar .btn,
.reader-nav .btn,
#copy-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.6rem 1.15rem;
  font-size:.95rem;
  line-height:1.35;
  white-space:nowrap;
  background:var(--theme-accent, #ff6600) !important;
  color:var(--theme-bg, #0a0a0a) !important;
  text-decoration:none;
  cursor:pointer;
}

/* Fortschrittsbalken: Theme-Farbe statt Fremd-Pink */
.reader-progress{
  position:sticky;
  top:calc(48px + env(safe-area-inset-top, 0px));
  height:3px; width:100%;
  background:rgba(255,255,255,.08);
  border-radius:2px; overflow:hidden;
  margin:.25rem 0 1rem;
}
.reader-progress > span{
  display:block; height:100%; width:100%;
  background:var(--theme-accent, #ff6600);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .08s linear;
}

/* ---------- Kapitel-Navigation unten: mobil stapeln, volle Breite ---------- */
.reader-nav{
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  margin-top:2rem;
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
@media (max-width: 540px){
  .reader-nav{ flex-direction:column-reverse; }
  .reader-nav > div{ display:flex; }
  .reader-nav .btn{ flex:1; }
  .reader-toolbar{ justify-content:stretch; }
  .reader-toolbar .rt-group{ width:100%; }
  .reader-toolbar .rt-group .btn{ flex:1; }
}

/* ---------- Kleinigkeiten ---------- */
.page-reader main{ padding-bottom:env(safe-area-inset-bottom, 0px); }
@media (prefers-reduced-motion: reduce){
  .reader-progress > span{ transition:none; }
  html{ scroll-behavior:auto; }
}