.com-clubkrant__flipbook {
    margin-top: 2rem;
}

.com-clubkrant__flipbook-shell {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.com-clubkrant__book {
    width: 100%;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.com-clubkrant__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.com-clubkrant__controls button {
    cursor: pointer;
}

.com-clubkrant__status {
    text-align: center;
    margin: 1rem 0;
}

.com-clubkrant__status.is-error {
    color: #b42318;
}

.com-clubkrant__fallback {
    margin-top: 1rem;
    text-align: center;
}

.com-clubkrant__fallback[hidden],
.com-clubkrant__status[hidden] {
    display: none;
}

.com-clubkrant__page-indicator {
    min-width: 5rem;
    text-align: center;
}

.com-clubkrant__flipbook:fullscreen {
    background: #111;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.com-clubkrant__flipbook:fullscreen .com-clubkrant__book-viewport {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
}

.com-clubkrant__book-viewport {
    width: 100%;
    height: min(78vh, 1100px);
    min-height: 420px;
    max-height: min(78vh, 1100px);
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 1rem;
    box-sizing: border-box;
}

.com-clubkrant__book-viewport.is-zoomed {
    cursor: grab;
    align-items: flex-start;
    justify-content: flex-start;
}

.com-clubkrant__book-viewport.is-mobile-zoomed {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior: contain;
}

.com-clubkrant__book-viewport.is-mobile-zoomed .com-clubkrant__book,
.com-clubkrant__book-viewport.is-mobile-zoomed .com-clubkrant__book-stage {
    touch-action: none;
}

.com-clubkrant__book-viewport.is-panning {
    cursor: grabbing;
    user-select: none;
}

.com-clubkrant__book-stage {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.com-clubkrant__book {
    flex: 0 0 auto;
}

.com-clubkrant__zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.com-clubkrant__zoom-controls button {
    min-width: 2.5rem;
}

.com-clubkrant__zoom-controls button[data-flipbook-zoom-reset] {
    min-width: 4.5rem;
}

/*
 * Responsive viewer layout.
 * Mobile browsers dynamically show/hide their address/tool bars.  Using the
 * dynamic viewport unit keeps the PDF area tied to the actually visible
 * viewport instead of the larger layout viewport (100vh).
 */
@media (max-width: 700px) {
    .com-clubkrant__flipbook {
        margin-top: 1rem;
    }

    .com-clubkrant__flipbook-shell {
        max-width: none;
    }

    .com-clubkrant__status {
        margin: .5rem 0;
        min-height: 1.25rem;
    }

    .com-clubkrant__book-viewport {
        width: 100%;
        height: min(58dvh, 620px);
        min-height: 260px;
        max-height: min(58dvh, 620px);
        padding: .25rem;
        scrollbar-gutter: auto;
    }

    .com-clubkrant__book-stage {
        max-width: 100%;
    }

    .com-clubkrant__controls {
        gap: .4rem;
        margin-top: .5rem;
        padding: .25rem .25rem max(.5rem, env(safe-area-inset-bottom));
    }

    .com-clubkrant__controls button {
        padding: .55rem .65rem;
        min-height: 42px;
        touch-action: manipulation;
    }

    .com-clubkrant__page-indicator {
        min-width: 3.75rem;
    }

    .com-clubkrant__zoom-controls {
        gap: .15rem;
    }

    .com-clubkrant__zoom-controls button {
        min-width: 42px;
    }

    .com-clubkrant__zoom-controls button[data-flipbook-zoom-reset] {
        min-width: 58px;
    }

    .com-clubkrant__fallback {
        margin: .5rem 0 max(.5rem, env(safe-area-inset-bottom));
    }
}

@media (max-width: 700px) and (orientation: portrait) {
    /* On a phone in portrait mode the browser's bottom toolbar can overlap the
       very bottom of the page. Put the controls before the viewer so every
       button remains reachable without depending on browser chrome behaviour. */
    .com-clubkrant__flipbook-shell {
        display: flex;
        flex-direction: column;
    }

    .com-clubkrant__status {
        order: 1;
    }

    .com-clubkrant__controls {
        order: 2;
        margin-top: .25rem;
        margin-bottom: .5rem;
    }

    .com-clubkrant__book-viewport {
        order: 3;
        height: min(60dvh, 680px);
        max-height: min(60dvh, 680px);
    }

    .com-clubkrant__fallback {
        order: 4;
    }
}

@media (max-width: 430px) {
    .com-clubkrant__controls {
        gap: .25rem;
    }

    .com-clubkrant__controls button {
        padding: .5rem .55rem;
        font-size: .9rem;
    }

    .com-clubkrant__page-indicator {
        min-width: 3.25rem;
        font-size: .9rem;
    }
}


/* Mobile controls stay compact and on one/two predictable rows. */
@media (max-width: 700px) {
    .com-clubkrant__controls {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: .3rem;
        margin: .35rem auto .5rem;
        padding: .15rem .2rem;
    }

    .com-clubkrant__controls > button,
    .com-clubkrant__zoom-controls > button {
        min-height: 36px;
        height: 36px;
        padding: .25rem .45rem;
        font-size: .78rem;
        line-height: 1;
        white-space: nowrap;
    }

    .com-clubkrant__page-indicator {
        min-width: 3.1rem;
        font-size: .78rem;
        line-height: 36px;
    }

    .com-clubkrant__zoom-controls {
        display: inline-flex;
        gap: .15rem;
    }

    .com-clubkrant__zoom-controls button {
        min-width: 34px;
    }

    .com-clubkrant__zoom-controls button[data-flipbook-zoom-reset] {
        min-width: 50px;
    }

    .com-clubkrant__mobile-canvas-wrap {
        flex: 0 0 auto;
        display: block;
        line-height: 0;
    }

    .com-clubkrant__mobile-canvas {
        display: block;
        max-width: none;
        background: #fff;
        box-shadow: 0 1px 8px rgba(0,0,0,.18);
    }
}


/* 0.5.2: ultra-compact mobile controls. Keep the complete control bar on one row
 * where possible and use familiar symbols while retaining accessible labels. */
@media (max-width: 700px) {
    .com-clubkrant__controls {
        flex-wrap: nowrap;
        width: auto;
        max-width: 100%;
        overflow: visible;
        gap: .2rem;
        margin: .2rem auto .35rem;
        padding: 0;
    }

    .com-clubkrant__controls > button,
    .com-clubkrant__zoom-controls > button {
        flex: 0 0 auto;
        width: 32px;
        min-width: 32px;
        max-width: 32px;
        height: 32px;
        min-height: 32px;
        padding: 0;
        font-size: 0;
        line-height: 32px;
        border-radius: .3rem;
    }

    .com-clubkrant__controls > [data-flipbook-prev]::before { content: '‹'; font-size: 1.45rem; }
    .com-clubkrant__controls > [data-flipbook-next]::before { content: '›'; font-size: 1.45rem; }
    .com-clubkrant__controls > [data-flipbook-fullscreen]::before { content: '⛶'; font-size: 1.05rem; }

    .com-clubkrant__page-indicator {
        flex: 0 0 auto;
        min-width: 42px;
        width: 42px;
        font-size: .72rem;
        line-height: 32px;
        white-space: nowrap;
    }

    .com-clubkrant__zoom-controls {
        flex: 0 0 auto;
        gap: .15rem;
    }

    .com-clubkrant__zoom-controls button {
        font-size: 1rem;
    }

    .com-clubkrant__zoom-controls button[data-flipbook-zoom-reset] {
        width: 46px;
        min-width: 46px;
        max-width: 46px;
        font-size: .68rem;
    }
}

@media (max-width: 360px) {
    .com-clubkrant__controls { gap: .12rem; }
    .com-clubkrant__controls > button,
    .com-clubkrant__zoom-controls > button {
        width: 29px;
        min-width: 29px;
        max-width: 29px;
        height: 29px;
        min-height: 29px;
        line-height: 29px;
    }
    .com-clubkrant__page-indicator { width: 38px; min-width: 38px; line-height: 29px; }
    .com-clubkrant__zoom-controls button[data-flipbook-zoom-reset] { width: 43px; min-width: 43px; max-width: 43px; }
}

/* 0.5.5: landscape touch devices use the full PageFlip book. Keep the
 * controls compact so a tablet landscape layout has maximum room for the
 * two-page spread, while portrait touch devices retain the lightweight viewer. */
@media (min-width: 701px) and (orientation: landscape) {
    .com-clubkrant__flipbook.is-tablet-landscape .com-clubkrant__controls {
        gap: .35rem;
        margin-top: .5rem;
    }

    .com-clubkrant__flipbook.is-tablet-landscape .com-clubkrant__controls > button,
    .com-clubkrant__flipbook.is-tablet-landscape .com-clubkrant__zoom-controls > button {
        min-height: 38px;
        height: 38px;
        padding: .35rem .6rem;
        font-size: .85rem;
        line-height: 1;
    }

    .com-clubkrant__flipbook.is-tablet-landscape .com-clubkrant__page-indicator {
        min-width: 3.5rem;
        font-size: .85rem;
    }

    .com-clubkrant__flipbook.is-tablet-landscape .com-clubkrant__zoom-controls {
        gap: .15rem;
    }

    .com-clubkrant__flipbook.is-tablet-landscape .com-clubkrant__zoom-controls button {
        min-width: 38px;
    }

    .com-clubkrant__flipbook.is-tablet-landscape .com-clubkrant__zoom-controls button[data-flipbook-zoom-reset] {
        min-width: 58px;
    }
}

/* 0.5.3: fullscreen mobile layout. Keep the compact controls at the very
 * top of the fullscreen surface so they do not consume the vertical space
 * that belongs to the PDF. The viewer occupies the remaining screen. */
@media (max-width: 700px) {
    .com-clubkrant__flipbook:fullscreen {
        position: relative;
        width: 100vw;
        height: 100dvh;
        max-height: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: block;
        overflow: hidden;
        background: #111;
    }

    .com-clubkrant__flipbook:fullscreen .com-clubkrant__flipbook-shell {
        position: relative;
        width: 100%;
        height: 100%;
        max-width: none;
        display: block;
    }

    .com-clubkrant__flipbook:fullscreen .com-clubkrant__controls {
        position: absolute;
        z-index: 20;
        top: env(safe-area-inset-top, 0px);
        left: 0;
        right: 0;
        width: 100%;
        height: 38px;
        margin: 0;
        padding: 3px 6px;
        box-sizing: border-box;
        background: rgba(17, 17, 17, .92);
    }

    .com-clubkrant__flipbook:fullscreen .com-clubkrant__book-viewport {
        position: absolute;
        z-index: 1;
        top: calc(env(safe-area-inset-top, 0px) + 38px);
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 4px;
        box-sizing: border-box;
    }

    .com-clubkrant__flipbook:fullscreen .com-clubkrant__status {
        position: absolute;
        z-index: 30;
        top: calc(env(safe-area-inset-top, 0px) + 40px);
        left: 0;
        right: 0;
        margin: 0;
        pointer-events: none;
    }

    .com-clubkrant__flipbook:fullscreen .com-clubkrant__fallback {
        display: none;
    }
}


/* 0.5.6: tablet landscape uses PageFlip HTML pages with lazy PDF.js canvases.
 * The page shells exist for the animation, while only the current/nearby
 * pages receive a rendered canvas. This avoids rendering the entire PDF. */
.com-clubkrant__lazy-page {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
}

.com-clubkrant__lazy-page-canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

@media (pointer: coarse) and (orientation: landscape) and (min-width: 701px) {
    .com-clubkrant__book-viewport {
        height: min(82dvh, 1000px);
        max-height: min(82dvh, 1000px);
        padding: .5rem;
    }

    .com-clubkrant__controls {
        gap: .35rem;
        margin-top: .4rem;
    }

    .com-clubkrant__controls button {
        min-height: 36px;
        padding: .4rem .6rem;
    }
}