/**
 * Buchseiten-Ansicht (Handbuch).
 *
 * Ergänzt die wiederverwendete .qm-document__*-Basis (siehe qm-document.css) um
 * buchspezifische Elemente: Badge, Breadcrumb, Unterseiten-Kacheln und
 * Blätter-Navigation. Nutzt die --confidence-*-Design-Tokens aus app-shell.css;
 * der Gold-Akzent ist die visuelle Klammer zur confidence-Marke.
 */

/* Buchseiten nutzen die volle Breite des Inhaltsbereichs (kein Lese-Limit wie
   bei QM-Dokumenten). So dehnt sich der Buchinhalt in seiner Spalte aus – und
   erst recht, wenn die Gliederung ausgeblendet wird und die Spalte breiter wird. */
.book-page.qm-document,
.book-page .qm-document__body,
.book-page .book-page__subpages,
.book-page .book-nav {
  max-width: none;
}

/* Toggle: Gliederung (rechte Seitenleiste) ein-/ausblenden. */
.book-page__sidebar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 6px 12px;
  color: var(--confidence-stone-700);
  font-size: 12px;
  font-weight: 650;
  background: var(--confidence-surface);
  border: 1px solid var(--confidence-stone-200);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}

.book-page__sidebar-toggle:hover,
.book-page__sidebar-toggle:focus-visible {
  color: var(--confidence-stone-950);
  border-color: var(--confidence-gold);
}

/* Eingeklappt: Gliederung aus, Buchinhalt nutzt die volle Breite. Statt eines
   harten display:none fährt die Grid-Spalte der Seitenleiste animiert auf 0,
   sodass der Buchinhalt smooth in die frei werdende Breite gleitet.
   Voraussetzung für die Interpolation ist eine feste px-Spaltenbreite – der
   Übergang minmax(240px, 300px) -> 0fr wäre NICHT interpolierbar und würde
   springen. Nur im zweispaltigen Desktop-Layout (>=992px). body.book-page-layout
   kommt aus preprocess_html; .gl-animate wird erst nach dem Laden per JS gesetzt,
   damit ein gemerkt-eingeklappter Zustand nicht beim Seitenaufbau animiert. */
@media (min-width: 992px) {
  body.book-page-layout .confidence-content-layout--with-aside {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  body.book-page-layout.gl-animate .confidence-content-layout--with-aside {
    transition: grid-template-columns .32s ease;
  }

  body.book-page-layout.gl-animate .confidence-context-sidebar {
    transition: opacity .22s ease;
  }

  body.book-page-layout.gl-sidebar-aus .confidence-content-layout--with-aside {
    grid-template-columns: minmax(0, 1fr) 0px;
  }

  body.book-page-layout.gl-sidebar-aus .confidence-context-sidebar {
    overflow: hidden;
    opacity: 0;
  }
}

/* Schmale Viewports (einspaltiges Layout): Gliederung einfach ausblenden. */
@media (max-width: 991.98px) {
  body.gl-sidebar-aus .confidence-context-sidebar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.book-page-layout.gl-animate .confidence-content-layout--with-aside,
  body.book-page-layout.gl-animate .confidence-context-sidebar {
    transition: none;
  }
}

/* Badge im Übersichts-Header: kennzeichnet Übersicht vs. Einzelseite. */
.book-page__badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  color: var(--confidence-gold-strong);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  background: var(--confidence-gold-soft);
  border: 1px solid #e6d6b0;
  border-radius: 6px;
}

.book-page__badge i {
  font-size: 13px;
}

/* Header: Badge/PDF in Zeile 1, Breadcrumb umbricht in Zeile 2. */
.book-page__overview .qm-document__overview-header {
  flex-wrap: wrap;
}

/* PDF-Downloads oben rechts: Label + „Diese Seite" / „Ganzes Buch". */
.book-page__downloads {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.book-page__downloads-label {
  color: var(--confidence-stone-600);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.book-page__pdf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  color: var(--confidence-gold-strong);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  background: var(--confidence-gold-soft);
  border: 1px solid #e6d6b0;
  border-radius: 6px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.book-page__pdf:hover,
.book-page__pdf:focus-visible {
  color: #6a4a10;
  background: #eeddb8;
  border-color: var(--confidence-gold);
  box-shadow: var(--confidence-shadow);
}

.book-page__pdf i {
  font-size: 15px;
}

/* Breadcrumb der Buchhierarchie (Wurzel → aktuelle Seite). */
.book-page__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  width: 100%;
  font-size: 12px;
  line-height: 1.4;
}

.book-page__breadcrumb a {
  color: var(--confidence-stone-600);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 3px;
}

.book-page__breadcrumb a:hover {
  color: var(--confidence-gold-strong);
  text-decoration: underline;
}

.book-page__breadcrumb-sep {
  color: var(--confidence-stone-300);
}

.book-page__breadcrumb-current {
  color: var(--confidence-stone-900);
  font-weight: 700;
}

/* Kachel-Grid der Unterseiten. */
.book-page__subpages {
  width: 100%;
  max-width: 900px;
  margin-top: 34px;
}

.book-page__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.book-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: var(--confidence-stone-800);
  text-decoration: none;
  background: var(--confidence-surface);
  border: 1px solid var(--confidence-stone-200);
  border-radius: var(--confidence-radius);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.book-tile:hover,
.book-tile:focus-visible {
  color: var(--confidence-stone-950);
  border-color: var(--confidence-gold);
  box-shadow: var(--confidence-shadow);
  transform: translateY(-1px);
}

.book-tile__icon {
  flex: 0 0 auto;
  color: var(--confidence-gold);
  font-size: 18px;
}

.book-tile__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.book-tile__arrow {
  flex: 0 0 auto;
  color: var(--confidence-stone-300);
  font-size: 14px;
  transition: color .15s ease, transform .15s ease;
}

.book-tile:hover .book-tile__arrow,
.book-tile:focus-visible .book-tile__arrow {
  color: var(--confidence-gold);
  transform: translateX(2px);
}

/* Aktionsleiste (Unterseite hinzufügen, Druckversion …). */
.book-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--confidence-stone-200);
}

.book-page__actions ul.links,
.book-page__actions .item-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-page__actions li {
  margin: 0;
}

/* Book-Aktionen tragen ab Werk .btn .btn-secondary — in den confidence-Stil
   überführen (dezenter Umriss, Gold-Akzent beim Hover). */
.book-page__actions .btn,
.book-page__actions a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  color: var(--confidence-stone-700);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  background: var(--confidence-surface);
  border: 1px solid var(--confidence-stone-300);
  border-radius: var(--confidence-radius);
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.book-page__actions .btn:hover,
.book-page__actions a:hover,
.book-page__actions .btn:focus-visible,
.book-page__actions a:focus-visible {
  color: var(--confidence-stone-950);
  background: var(--confidence-surface);
  border-color: var(--confidence-gold);
  box-shadow: var(--confidence-shadow);
}

/* Blätter-Navigation (vorherige / nächste Seite). */
.book-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 900px;
  margin-top: 34px;
}

.book-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 48%;
  padding: 12px 16px;
  color: var(--confidence-stone-800);
  text-decoration: none;
  background: var(--confidence-surface);
  border: 1px solid var(--confidence-stone-200);
  border-radius: var(--confidence-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.book-nav__link:hover,
.book-nav__link:focus-visible {
  color: var(--confidence-stone-950);
  border-color: var(--confidence-gold);
  box-shadow: var(--confidence-shadow);
}

.book-nav__link--next {
  margin-left: auto;
}

.book-nav__link i {
  flex: 0 0 auto;
  color: var(--confidence-gold);
  font-size: 18px;
}

.book-nav__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.book-nav__link--next .book-nav__text {
  text-align: right;
}

.book-nav__dir {
  color: var(--confidence-stone-600);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.book-nav__title {
  overflow: hidden;
  color: var(--confidence-stone-900);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-nav__spacer {
  flex: 0 0 auto;
}

@media (max-width: 575px) {
  .book-nav {
    flex-direction: column;
  }

  .book-nav__link {
    max-width: 100%;
  }

  .book-nav__link--next {
    margin-left: 0;
  }
}