/* Der äußere Rahmen für die gesamte Leseprobe-Sektion */
.book-reader-section {
    display: flex;
    justify-content: center; /* Zentriert horizontal */
    align-items: center;     /* Zentriert vertikal */
    min-height: calc(100vh - 80px); /* Volle Höhe minus Menü-Höhe */
    margin-top: 80px;        /* Platzhalter für dein fixiertes Menü */
    width: 100%;
    position: relative;
    z-index: 5;
    /* Ein dezenter Schatten-Verlauf auf der Karte unter dem Buch */
    background: radial-gradient(circle, rgba(0,0,0,0.2) 0%, transparent 80%);
}

/* Der Bereich für den 3D-Effekt */
.book-viewport {
    width: 95%;
    overflow: hidden; /* Wichtig gegen das Rausschieben */
    max-width: 1200px;    /* Maximale Breite am PC (ca. 2x 600px Seiten) */
    height: 80vh;         /* Begrenzt die Höhe auf 80% des Bildschirms */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

/* Spezielle Handy-Anpassung */
@media (max-width: 768px) {
    .book-viewport {
        max-width: 500px; /* Am Handy nur eine Seite breit */
        height: 70vh;     /* Etwas kleiner für Browser-Adressleisten */
    }
}

/* Das eigentliche Buch-Objekt */
#book {
    touch-action: pan-y; 
    margin: 0 auto;
    max-height: calc(90vh - 80px);
}

.page {
    pointer-events: auto;
    cursor: pointer; /* Zeigt am PC, dass es klickbar ist */
}

.page img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none; /* Der Klick geht "durch" das Bild an den Page-Container */

    /* Verhindert, dass man das Bild am Handy "markiert" */
    user-select: none;
    -webkit-user-drag: none;
}

#prev, #next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  padding: 10px 20px;
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#prev {
  left: 10px;
}
#next {
  right: 10px;
}