/* Visor de Künstlerbücher: cada página es una imagen de buchseiten/<libro>/. Si cabe, doble página como el libro
   impreso; si no, página a página. Lo decide js/buch.js midiendo, y también da a cada página su ancho y alto y
   --buehne-h para que el libro quepa entero en la pantalla sin bajar. */
/* KÜNSTLERBÜCHER (vuelve a la lista) y el título del libro empiezan donde el título y el texto de las demás páginas. */
.buch-pagina { flex: 1; display: flex; flex-direction: column; padding: var(--aire) var(--margen) 1.25rem; }
.buch-pagina .seitentitel, .buch-pagina h1 { margin-left: calc(var(--x-text) - var(--margen)); }
.buch-pagina .seitentitel { margin-bottom: var(--kb-buch-abstand, 0.75rem); }
.buch-pagina h1 { font-size: var(--t-titulo, 19px); font-weight: 400; letter-spacing: var(--titel-laufweite, var(--schrift-serientitel-laufweite)); text-transform: var(--schrift-serientitel-case); color: var(--texto-activo); }
.buch-pagina h1 .anio { margin-right: 0.9rem; color: var(--texto); }

.buch { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(0.25rem, 1.5vw, 1.25rem); margin-top: 1.75rem; }
.buch__buehne { display: grid; place-items: center; height: var(--buehne-h, 70vh); touch-action: pan-y pinch-zoom; }

/* Todos los pliegos en la misma celda: al pasar página nada salta de sitio. Thomas, 22 oct: con fundido cruzado
   «vermischen sich die Fotos»; 23 oct: el corte seco, «weniger blitzartig»; 8 nov, opción B «Überlappend»: la página
   vieja se apaga en la mitad de --blende y la nueva empieza cuando la vieja va por la mitad (a un cuarto de --blende):
   nunca queda el gris solo y apenas se mezclan. */
.pliego { grid-area: 1 / 1; display: flex; justify-content: center; visibility: hidden; }
.pliego.activo { visibility: visible; }
.blende { --blende: .8s; }
.blende .pliego { opacity: 0; transition: opacity calc(var(--blende) / 2) ease, visibility 0s linear calc(var(--blende) / 2); }
.blende .pliego.activo { opacity: 1; transition: opacity calc(var(--blende) / 2) ease calc(var(--blende) / 4), visibility 0s; }
.seite { position: relative; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.seite:not(.seite--leer) { background: rgba(0, 0, 0, .18); box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, .28); }
.seite img { display: block; width: 100%; height: 100%; }
/* El pliegue del lomo: una sombra muy leve en el borde interior de cada página, solo a doble página. */
.doppel .seite--links::after, .doppel .seite--rechts::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.doppel .seite--links::after { background: linear-gradient(to left, rgba(0, 0, 0, .22), transparent 6%); }
.doppel .seite--rechts::after { background: linear-gradient(to right, rgba(0, 0, 0, .22), transparent 6%); }

.buch button { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; transition: color .16s, opacity .16s; }
.buch button .icono, .buch__leiste button .icono { width: 24px; height: 24px; stroke-width: 1.25; }
.buch button[disabled] { opacity: .25; cursor: default; }
@media (hover: hover) { .buch button:hover:not([disabled]), .buch__leiste button:hover { color: var(--texto-activo); } }

.buch__leiste { display: flex; align-items: center; justify-content: center; gap: clamp(0.75rem, 3vw, 1.75rem); padding-top: 1rem; }
.buch__zaehler { min-width: 7.5em; font-size: var(--t-pie); letter-spacing: 0.16em; font-variant-numeric: tabular-nums; text-align: center; }
.buch__leiste button { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; transition: color .16s; }
.buch__leiste button .icono { width: 18px; height: 18px; }
.buch__leiste [hidden] { display: none; }

/* Regleta para saltar de página: hay libros de 368 páginas. */
.buch__regler { -webkit-appearance: none; appearance: none; flex: 0 1 26rem; min-width: 6rem; height: 1.5rem; background: none; cursor: pointer; }
.buch__regler::-webkit-slider-runnable-track { height: 1px; background: var(--texto); }
.buch__regler::-moz-range-track { height: 1px; background: var(--texto); }
.buch__regler::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%; background: var(--texto-activo); border: 0; }
.buch__regler::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: var(--texto-activo); border: 0; }

/* Vollbild: solo el libro, sin cabecera. */
.buch-pagina:fullscreen { background: var(--fondo); justify-content: center; }

/* Botón flotante 'X' arriba a la izquierda para volver a tamaño normal */
.btn-cerrar-fullscreen { display: none; }
:fullscreen .btn-cerrar-fullscreen {
  display: inline-flex; position: fixed; top: 1.5rem; left: 1.5rem; z-index: 100;
  background: rgba(15, 23, 42, 0.85); border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #ffffff; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; align-items: center;
  gap: 0.5rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px);
  transition: all 0.2s ease;
}
:fullscreen .btn-cerrar-fullscreen:hover {
  background: #ffffff; color: #111111; border-color: #ffffff; transform: scale(1.05);
}

/* Lupe: el pliego al doble de tamaño, para recorrerlo moviendo la página; un clic o Esc la cierra. */
.lupe { position: fixed; inset: 0; z-index: 50; overflow: auto; background: var(--fondo); cursor: zoom-out; }
.lupe__pliego { display: flex; width: max-content; margin: auto; padding: var(--margen); }
.lupe img { display: block; height: auto; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* iPhone en vertical: sin flechas a los lados, que le quitan ancho a la página; se pasa con el dedo o tocando la página. */
@media (max-width: 699px) and (orientation: portrait) {
  .buch { grid-template-columns: minmax(0, 1fr); }
  .buch > button { display: none; }
}

/* iPhone girado: solo el libro, lo más grande posible, con las flechas a los lados (como las Series). */
@media (orientation: landscape) and (max-height: 500px) {
  .cabecera, .buch-pagina .seitentitel, .buch-pagina h1, .buch__leiste { display: none; }
  /* Thomas, 24 oct: las dobles páginas más grandes, con el borde tan estrecho como el de las fotos de las Series
     (--rand-foto, 25 px). Las flechas van dentro de ese borde, encima del gris, y no le quitan ancho al libro. */
  .buch-pagina { --kb-rand: 25px; padding: 0.5rem var(--kb-rand); justify-content: center; }
  .buch { position: relative; grid-template-columns: minmax(0, 1fr); column-gap: 0; margin-top: 0; }
  .buch > button { position: absolute; top: 0; bottom: 0; width: var(--kb-rand); height: auto; }
  .buch > [data-paso="-1"] { left: calc(-1 * var(--kb-rand)); }
  .buch > [data-paso="1"] { right: calc(-1 * var(--kb-rand)); }
}

/* Varianten para que Thomas elija (?varianten=1, js/buch-varianten.js). */
.v-ohne-schatten .seite:not(.seite--leer) { box-shadow: none; }
.v-ohne-schatten .seite::after { display: none; }
.v-leiste-zahl .buch__regler, .v-leiste-zahl .buch__leiste button { display: none; }
.v-leiste-aus .buch__leiste { display: none; }
.v-ohne-pfeile .buch { grid-template-columns: minmax(0, 1fr); }
.v-ohne-pfeile .buch > button { display: none; }
.con-varianten { padding-bottom: 7.5rem; }
.varianten { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem;
  padding: 0.7rem var(--margen); background: #2b2b2b; color: #e6e6e6; font-size: 0.8rem; box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, .3); }
.varianten__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.varianten__grupo span { margin-right: 0.25rem; color: #a8a8a8; }
.varianten button { padding: 0.3rem 0.65rem; border: 1px solid #6a6a6a; border-radius: 3px; transition: background-color .2s, color .2s; }
.varianten button[aria-pressed="true"] { background: #ffffff; border-color: #ffffff; color: #222222; }
.varianten__senden { margin-left: auto; padding: 0.4rem 0.8rem; border: 1px solid #ffffff; border-radius: 3px; color: #ffffff; cursor: pointer; }
.varianten__senden:hover { background: #ffffff; color: #222222; }
.varianten__abrir { display: none; }
/* Con la prueba abierta (?probe=1) sus botones y su panel suben por encima de la barra. */
.con-varianten .pz-boton, .con-varianten .pz-correo { bottom: calc(var(--varianten-h, 0px) + 0.75rem); }
.con-varianten .pz-panel:not([style*="top"]) { bottom: calc(var(--varianten-h, 0px) + 3.4rem); }
@media (max-width: 699px), (orientation: landscape) and (max-height: 500px) {
  .con-varianten { padding-bottom: 3.5rem; }
  .varianten { gap: 0.6rem; padding-block: 0.5rem; }
  .varianten__abrir { display: inline-block; }
  .varianten:not(.abierta) .varianten__grupo { display: none; }
  .varianten__grupo { flex-basis: 100%; }
}