/*
 * Modal für das E-Paper-Flipbook. Bewusst handgeschriebenes CSS statt Tailwind-Utilities: die
 * Klassen werden in flipbook.js im Markup zusammengesetzt, und Tailwind scannt kein JavaScript –
 * Utility-Klassen daraus würden weggepurged.
 *
 * Die Farben kommen als CSS-Variablen aus dem Theme-Bundle (--color-primary aus dem @theme-Block in
 * themes/tailwind/components/base.css). Kein Hex-Wert als Rückfall: das Bundle wird global in
 * PageController::init() geladen, ein zweiter Ort für denselben Farbwert würde nur auseinanderlaufen.
 */
.flipbook-open {
    overflow: hidden;
}

.flipbook-modal {
    position: fixed;
    inset: 0;
    /* Über allem – auch über dem gescrollten Sticky-Header (z-[9999], siehe Header.ss). */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.25rem 4.5rem 4rem;
    /* Deckend – die Seite darunter soll nicht durchscheinen. */
    background: var(--color-primary);
}

.flipbook-modal__bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.15rem;
    color: #fff;
    font-size: 0.9rem;
}

.flipbook-modal__title {
    font-weight: 600;
}

.flipbook-modal__page {
    margin-left: auto;
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
}

.flipbook-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
    transition: opacity 0.2s ease;
}

.flipbook-modal__close:hover {
    opacity: 0.65;
}

/* Die Bühne nimmt die Fläche, die das Polster des Modals übrig lässt. Der Breiten-Deckel ist
   großzügig – zwei Seiten in der vollen Auflösung der erzeugten Bilder; in der Praxis begrenzt fast
   immer die Höhe, und die passt flipbook.js selbst ein (fitToStage). Ein zusätzliches max-height in
   vh stand hier früher und hat nur Fläche verschenkt: die Höhe steht durch das Polster schon fest. */
.flipbook-modal__stage {
    width: 100%;
    max-width: 3200px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flipbook-book {
    width: 100%;
    /* Sanftes Gleiten zwischen zentriertem Cover/Rückseite und normaler Doppelseite (siehe
       flipbook.js). Ähnlich lang wie die Blätter-Animation (flippingTime 1000 ms). */
    transition: transform 0.8s ease-in-out;
}

/* Hier stand eine Regel für .flipbook-book img. Die lief ins Leere: loadFromImages() nimmt den
   Canvas-Renderer der Bibliothek, die Seiten werden in ein <canvas> gezeichnet und es gibt gar keine
   <img> im DOM. Größe und Seitenverhältnis kommen aus flipbook.js. */

/* Navigations-Pfeile im Stil der Swiper-Pfeile (bg-white/30, backdrop-blur, invertiert beim Hover). */
.flipbook-modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    border: 0;
    font-size: 1.4rem;
    cursor: pointer;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.flipbook-modal__nav:hover {
    background: #fff;
    color: var(--color-primary);
}

.flipbook-modal__nav--prev {
    left: 0.85rem;
}

.flipbook-modal__nav--next {
    right: 0.85rem;
}

/* Dezente quadratische Werkzeug-Buttons (Vollbild, Download) unter dem Flipbook. */
.flipbook-modal__tools {
    position: absolute;
    bottom: 0.9rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
}

.flipbook-modal__tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 0;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.flipbook-modal__tool:hover {
    background: #fff;
    color: var(--color-primary);
}

/* Der Einzel-/Doppelseiten-Umschalter ist nur auf schmalen Schirmen sinnvoll – dort zeigt StPageFlip
   ohne Umschalten eine Einzelseite. Auf breiten Schirmen ist ohnehin die Doppelseite aktiv. */
.flipbook-modal__tool--toggle {
    display: none;
}

@media (max-width: 640px) {
    .flipbook-modal {
        padding: 3.25rem 0.75rem 4rem;
    }

    .flipbook-modal__nav {
        display: none;
    }

    .flipbook-modal__tool--toggle {
        display: flex;
    }
}