/* Vollbild-Lesezustand und Zoom-Optionszustand. Additiv, Renderkern unberuehrt. */

html, body.reader {
  background: #faf4e8;
}
body.reader.darkmode {
  background: #14110e;
}

#reader-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
  background: transparent;
  transition: background-color 0.32s ease;
}

#paper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  position: relative;
  background: #faf4e8;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.32s ease, border-radius 0.32s ease, box-shadow 0.32s ease;
  will-change: transform;
}
body.reader.darkmode #paper { background: #14110e; }

#paper > #pages {
  flex: 1;
  min-height: 0;
}

#paper-title,
#paper-page {
  flex: 0 0 auto;
  text-align: center;
  font-family: 'GFS Didot', serif;
  color: #1a1a1a;
  opacity: 0.42;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.reader.darkmode #paper-title,
body.reader.darkmode #paper-page { color: #ddd6c9; }

#paper-title {
  font-size: 17px;
  opacity: 0.66;
  letter-spacing: 0.06em;
  padding: 10px 24px 2px;
  padding-top: calc(10px + env(safe-area-inset-top));
}
#paper-page {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 0 24px 2px;
  padding-bottom: calc(2px + env(safe-area-inset-bottom));
}

/* Harter Schnitt ohne Animation: Renderer misst nie im skalierten Zustand */
body.reader.zoom-cut #paper {
  transition: none !important;
  transform: scale(1) !important;
}

/* Vollbild ist Standard: Leisten sind keine Leisten, sie sind weg. */
body.reader:not(.zoomed) #top-bar,
body.reader:not(.zoomed) #bottom-bar {
  display: none !important;
}

/* Zoom-Optionszustand */
body.reader.zoomed #reader-stage {
  background: var(--zoom-bg, #1b1714);
}
body.reader.darkmode.zoomed #reader-stage {
  background: var(--zoom-bg, #ece5d7);
}

body.reader.zoomed #paper {
  transform: scale(0.8);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18), 0 18px 50px rgba(0,0,0,0.35);
}
body.reader.darkmode.zoomed #paper {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.22), 0 18px 50px rgba(0,0,0,0.5);
}

/* Bedienelemente liegen frei rund ums Blatt, nicht als Balken. */
body.reader.zoomed #top-bar,
body.reader.zoomed #bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 40;
  background: transparent !important;
  box-shadow: none !important;
  max-height: none;
  overflow: visible;
  pointer-events: none;
}
body.reader.zoomed #top-bar { top: 0; }
body.reader.zoomed #bottom-bar { bottom: 0; }
body.reader.zoomed #top-bar > *,
body.reader.zoomed #bottom-bar > * {
  pointer-events: auto;
}

body.reader.zoomed #top-bar,
body.reader.zoomed #top-bar .icon-btn,
body.reader.zoomed #bottom-bar,
body.reader.zoomed #bottom-bar .icon-btn {
  color: var(--zoom-fg, #f3ece0) !important;
}
body.reader.zoomed .progress-track {
  background-color: var(--zoom-fg-soft, rgba(255,255,255,0.22)) !important;
}
body.reader.zoomed .progress-fill {
  background-color: var(--zoom-fg, #f3ece0) !important;
}
body.reader.zoomed .progress-texts,
body.reader.zoomed .progress-texts strong {
  color: var(--zoom-fg, #e8ddc9) !important;
}
body.reader.darkmode.zoomed #top-bar,
body.reader.darkmode.zoomed #top-bar .icon-btn,
body.reader.darkmode.zoomed #bottom-bar,
body.reader.darkmode.zoomed #bottom-bar .icon-btn {
  color: var(--zoom-fg, #211c16) !important;
}
body.reader.darkmode.zoomed .progress-track {
  background-color: var(--zoom-fg-soft, rgba(0,0,0,0.18)) !important;
}
body.reader.darkmode.zoomed .progress-fill {
  background-color: var(--zoom-fg, #211c16) !important;
}
body.reader.darkmode.zoomed .progress-texts,
body.reader.darkmode.zoomed .progress-texts strong {
  color: var(--zoom-fg, #3a3228) !important;
}

@media (max-width: 600px) {
  body.reader.zoomed #paper { transform: scale(0.78); }
}

/* Optionen- und Inhaltsfenster im beigen Syntera-Kartenstil */
.reader .lightbox-content {
  background: linear-gradient(180deg, var(--sr-paper-1, #fffaf0) 0%, var(--sr-paper-2, #f7eedb) 100%) !important;
  color: var(--sr-ink, #2c2620) !important;
  border: 1px solid var(--sr-line, rgba(182,132,51,0.26));
  border-radius: 22px;
  box-shadow: var(--sr-shadow, 0 30px 80px rgba(74,49,13,0.22)), 0 1px 0 rgba(255,255,255,0.6) inset;
}
body.reader.darkmode .lightbox-content {
  background: linear-gradient(180deg, #1c1610 0%, #120e09 100%) !important;
  color: #efe6d2 !important;
  border-color: rgba(214,175,103,0.32);
  box-shadow: 0 30px 80px rgba(0,0,0,0.62), 0 0 0 1px rgba(214,175,103,0.08) inset;
}
.reader .lightbox-content::after {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, transparent, var(--sr-gold-2, #d6af67) 22%, var(--sr-gold-1, #f3dca0) 50%, var(--sr-gold-2, #d6af67) 78%, transparent);
  opacity: 0.85;
  pointer-events: none;
}

.sr-panel-logo {
  display: block;
  height: 50px;
  width: auto;
  margin: 2px auto 14px;
  object-fit: contain;
}

.reader .lightbox-content .panel-heading {
  font-family: 'GFS Didot', Georgia, serif;
  font-weight: 600;
  color: var(--sr-ink, #2c2620);
  border-bottom: 1px solid var(--sr-line, rgba(182,132,51,0.26));
  letter-spacing: 0.02em;
}
body.reader.darkmode .lightbox-content .panel-heading {
  color: #efe6d2;
  border-bottom-color: rgba(214,175,103,0.3);
}

.reader .lightbox-content .group-label {
  color: var(--sr-gold-4, #8a6526);
}
body.reader.darkmode .lightbox-content .group-label {
  color: var(--sr-gold-2, #d6af67);
}

.reader .lightbox-content .lightbox-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(154,121,50,0.32);
  background: rgba(255,255,255,0.6);
  color: #6b5526;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
body.reader.darkmode .lightbox-content .lightbox-close {
  background: rgba(255,255,255,0.06);
  color: #d8c79b;
  border-color: rgba(214,175,103,0.32);
}

.reader .lightbox-content .modern-list-item {
  border-radius: 12px;
  transition: background-color 0.15s ease;
}
.reader .lightbox-content .modern-list-item.clickable:hover {
  background: rgba(182,132,51,0.10);
}
.reader .lightbox-content .chevron {
  color: var(--sr-gold-3, #b68433);
}

.reader .lightbox-content .segmented-control {
  background: rgba(182,132,51,0.12);
}
body.reader.darkmode .lightbox-content .segmented-control {
  background: rgba(214,175,103,0.16);
}
.reader .lightbox-content .segmented-control input:checked + .segment-label {
  background: linear-gradient(155deg, var(--sr-gold-1, #f3dca0) 0%, var(--sr-gold-2, #d6af67) 60%, var(--sr-gold-3, #b68433) 100%);
  color: #1c1407;
}

.reader .lightbox-content .color-swatch .swatch-auto {
  background:
    linear-gradient(135deg, #1b1714 0 50%, #ece5d7 50% 100%);
}

/* Kapitelangabe in der Kopfzeile, ruhig und mittig */
#top-chapter {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.7;
  padding: 0 8px;
}
.modern-top-bar #back-btn,
.modern-top-bar #bookmark-icon,
.modern-top-bar #font-options-icon,
.modern-top-bar #search-btn,
.modern-top-bar #menu-btn { flex: 0 0 auto; }

#top-chapter-time { display: none; }
body.reader.zoomed #top-chapter-time {
  display: block;
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0.62;
  z-index: 40;
  pointer-events: none;
  padding: 0 16px;
  color: var(--zoom-fg, #f3ece0) !important;
}
body.reader.darkmode.zoomed #top-chapter-time {
  color: var(--zoom-fg, #211c16) !important;
}

/* Schliess-X bleibt in allen Fenstern oben rechts fixiert, nur Inhalt scrollt */
.reader .lightbox-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.reader .lightbox-content > .lb-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.reader .lightbox-content > .lightbox-close {
  position: absolute;
  z-index: 6;
}