/* Menu "book" viewer shared by /edienkarte and /dzerienukarte */

.book-page {
    --paper: #fbf8f2;
    --ink: #f5ede0;
    --accent: #c9a36a;
    --top: 150px;          /* fixed desktop header */
    --chrome: 150px;       /* title + controls */
    padding-top: var(--top);
    background:
        radial-gradient(ellipse at 50% 35%, rgba(109, 76, 43, 0.55), transparent 70%),
        var(--color-background, #37210b);
}

.book-page .menu-title {
    font-family: Quicksand, Arial, sans-serif;
    text-align: center;
    font-weight: 300;
    font-size: 2rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ink);
    margin: 14px 0 10px;
    padding: 0;
}

.book-page .menu-title small {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 4px;
    color: var(--accent);
    margin-top: 4px;
}

.book-stage {
    width: 100%;
    padding: 0 16px;
}

.book-wrap {
    height: calc(100vh - var(--top) - var(--chrome));
    height: calc(100svh - var(--top) - var(--chrome));
    min-height: 320px;
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;           /* gestures here turn pages */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.book {
    flex: 0 0 auto;
    cursor: pointer;
}

.book .page {
    background: var(--paper);
    overflow: hidden;
}

.book .page img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* Paper tint + spine shading so the pages read as a printed booklet. */
.book .page::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(120, 90, 40, 0.05), rgba(120, 90, 40, 0.02) 40%, rgba(120, 90, 40, 0.07));
}
.book .page.pg-left::after {
    background:
        linear-gradient(to left, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.06) 4%, transparent 12%),
        linear-gradient(180deg, rgba(120, 90, 40, 0.05), rgba(120, 90, 40, 0.07));
}
.book .page.pg-right::after,
.book .page.pg-single::after {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.05) 3%, transparent 9%),
        linear-gradient(180deg, rgba(120, 90, 40, 0.05), rgba(120, 90, 40, 0.07));
}

/* Soft shadow under the book (desktop only: filters are costly while pages animate on phones). */
@media (min-width: 769px) {
    .book .stf__block {
        filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
    }
}

/* ---------- controls ---------- */

.book-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px auto 0;
    flex-wrap: wrap;
}

.book-btn {
    min-width: 48px;
    height: 48px;
    padding: 0 16px;
    border-radius: 24px;
    border: 1px solid rgba(245, 237, 224, 0.35);
    background: rgba(0, 0, 0, 0.25);
    color: var(--ink);
    font: 500 1rem Quicksand, Arial, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.book-btn:hover:not(:disabled) { background: var(--color-primary, #6d4c2b); border-color: var(--accent); }
.book-btn:disabled { opacity: 0.3; cursor: default; }
.book-btn svg { width: 20px; height: 20px; flex: none; }
.book-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.book-counter {
    min-width: 84px;
    text-align: center;
    color: var(--ink);
    font: 600 1rem Quicksand, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

.book-hint {
    text-align: center;
    color: rgba(245, 237, 224, 0.55);
    font: 400 0.8rem 'Source Sans Pro', sans-serif;
    letter-spacing: 1px;
    margin: 10px 0 0;
}
.book-hint .touch { display: none; }
@media (hover: none) and (pointer: coarse) {
    .book-hint .mouse { display: none; }
    .book-hint .touch { display: inline; }
}
.book-stage.is-end .book-hint .more { color: var(--accent); }

/* ---------- zoom viewer ---------- */

.zoom-lock, .zoom-lock body { overflow: hidden !important; }

.book-zoom-viewer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(20, 12, 4, 0.97);
    display: flex;
    flex-direction: column;
}
.book-zoom-viewer[hidden] { display: none; }

.zoom-scroll {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior: contain;
    display: flex;
    padding: 64px 12px 12px;
}
.zoom-scroll img {
    margin: auto;
    width: min(100%, calc((100svh - 150px) * 0.6923));
    height: auto;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    cursor: zoom-in;
}
.zoom-scroll.is-zoomed img {
    width: max(220%, 900px);
    max-width: none;
    cursor: zoom-out;
}

.zoom-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 48px;
    padding: 0;
    font-size: 1.4rem;
    background: rgba(0, 0, 0, 0.6);
}

.zoom-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.4);
}

/* ---------- mobile ---------- */

@media (max-width: 768px) {
    .book-page {
        --top: 52px;           /* fixed phone bar (mainstyles.css .call-bar) */
        --chrome: 160px;
    }
    .book-page .menu-title {
        font-size: 1.5rem;
        letter-spacing: 2px;
        margin: 10px 16px 8px;
        line-height: 48px;
    }
    .book-page .menu-title small { display: none; }
    .book-stage { padding: 0 12px; }
    .book-controls { gap: 6px; margin-top: 12px; }
    .book-btn { padding: 0 12px; }
    .book-btn .lbl { display: none; }
    .book-counter { min-width: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .book-btn { transition: none; }
}