/* =========================================================================
 * pdf2web brochure overlay — extracted from the VerVieVas embed snippet
 * (living-with-pku-wp-snippet_v3). Uses --pdf2web-btn-bg / -fg to blend the
 * trigger with the theme palette; the wipe-btn class stays authoritative.
 * ========================================================================= */

.pdf2web-embed {
    font-family: inherit;
    color: inherit;
    --pdf2web-btn-bg: var(--wipe-orange);
    --pdf2web-btn-fg: #ffffff;
}
.pdf2web-embed__intro { margin: 0 0 .75rem; line-height: 1.5; }

/* Default trigger styling from the snippet — skipped when the trigger
   is also carrying .wipe-btn so the theme button owns padding/font. */
.pdf2web-embed__open:not(.wipe-btn) {
    appearance: none;
    display: inline-block;
    box-sizing: border-box;
    padding: .65rem 1.1rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    background-color: var(--pdf2web-btn-bg);
    color: var(--pdf2web-btn-fg);
    border: 2px solid transparent;
}
.pdf2web-embed__open::-moz-focus-inner { border: 0; padding: 0; }

.pdf2web-embed__dialog {
    display: none;
    position: fixed;
    inset: 0;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
}
.pdf2web-embed__dialog[open] { display: grid; place-items: center; }
.pdf2web-embed__dialog::backdrop { background: rgba(12, 14, 22, .72); }

.pdf2web-embed__frame {
    width: min(96vw, 1600px);
    height: 92vh;
    background: #111;
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
    position: relative;
}
.pdf2web-embed__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.pdf2web-embed__close {
    position: absolute;
    top: .35rem;
    right: .45rem;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
.pdf2web-embed__close:hover { opacity: .7; }
.pdf2web-embed__close:focus,
.pdf2web-embed__close:focus-visible,
.pdf2web-embed__close:active { outline: 0; box-shadow: none; border: 0; }

.pdf2web-embed__dialog.is-animated[open] .pdf2web-embed__frame {
    animation: pdf2web-in var(--pdf2web-anim, 280ms) ease-out;
}
.pdf2web-embed__dialog.is-animated[open]::backdrop {
    animation: pdf2web-fade-in var(--pdf2web-anim, 280ms) ease-out;
}
.pdf2web-embed__dialog.is-animated.is-closing .pdf2web-embed__frame {
    animation: pdf2web-out var(--pdf2web-anim, 280ms) ease-in forwards;
}
.pdf2web-embed__dialog.is-animated.is-closing::backdrop {
    animation: pdf2web-fade-out var(--pdf2web-anim, 280ms) ease-in forwards;
}

@keyframes pdf2web-in {
    from { transform: scale(.86); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
@keyframes pdf2web-out {
    from { transform: scale(1); opacity: 1; }
    to   { transform: scale(.86); opacity: 0; }
}
@keyframes pdf2web-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pdf2web-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* =========================================================================
 * Quiz overlay — reuses the pdf2web dialog styling but paints the frame in
 * white and gives it a taller, narrower footprint that fits the quiz UI.
 * ========================================================================= */
.wipe-quiz-overlay__dialog {
    display: none;
    position: fixed;
    inset: 0;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
}
.wipe-quiz-overlay__dialog[open] { display: grid; place-items: center; }
.wipe-quiz-overlay__dialog::backdrop { background: rgba(12, 14, 22, .72); }

.wipe-quiz-overlay__frame {
    width: min(96vw, 1000px);
    max-height: 92vh;
    height: auto;
    background: var(--pku-bg, #ebf4fa);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
    position: relative;
    display: flex;
    flex-direction: column;
}
.wipe-quiz-overlay__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 1.75rem 1.25rem 1.25rem;
    display: flex;
}
/* Quiz fills the full frame width (Querformat), keeps its own background,
   loses double border. Height is capped to body so the vendor JS's explicit
   pixel heights can't push content past the modal. */
.wipe-quiz-overlay__body :is(#pku-ltc-quiz, .pku-quiz) {
    --pku-max: 100%;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding-top: 0;
}
/* Stop the intro illustration from flex-growing into all remaining vertical
   space (that was pushing the "Start" button way down). Desktop gets a
   generous, viewport-adaptive height around 400px so the intro fills nicely;
   mobile keeps it compact. */
.wipe-quiz-overlay__body :is(#pku-ltc-quiz, .pku-quiz) .pku-quiz__intro-illu {
    flex: 0 0 auto;
    height: clamp(280px, 42vh, 460px);
    min-height: 280px;
    max-height: 460px;
}
.wipe-quiz-overlay__body :is(#pku-ltc-quiz, .pku-quiz) .pku-quiz__illu-wrap {
    max-height: 32vh;
}
@media (max-width: 640px) {
    .wipe-quiz-overlay__frame { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; box-shadow: none; }
    .wipe-quiz-overlay__body { padding: 2.75rem 0.85rem 1rem; }
    .wipe-quiz-overlay__body :is(#pku-ltc-quiz, .pku-quiz) .pku-quiz__intro-illu {
        height: clamp(140px, 22vh, 220px);
        min-height: 140px;
        max-height: 220px;
    }
}

.wipe-quiz-overlay__close {
    position: absolute;
    top: 0.35rem;
    right: 0.55rem;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: var(--wipe-purple);
    font: inherit;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}
.wipe-quiz-overlay__close:hover { opacity: .7; }
.wipe-quiz-overlay__close:focus,
.wipe-quiz-overlay__close:focus-visible,
.wipe-quiz-overlay__close:active { outline: 0; box-shadow: none; border: 0; }

.wipe-quiz-overlay__dialog.is-animated[open] .wipe-quiz-overlay__frame {
    animation: pdf2web-in var(--pdf2web-anim, 280ms) ease-out;
}
.wipe-quiz-overlay__dialog.is-animated[open]::backdrop {
    animation: pdf2web-fade-in var(--pdf2web-anim, 280ms) ease-out;
}
.wipe-quiz-overlay__dialog.is-animated.is-closing .wipe-quiz-overlay__frame {
    animation: pdf2web-out var(--pdf2web-anim, 280ms) ease-in forwards;
}
.wipe-quiz-overlay__dialog.is-animated.is-closing::backdrop {
    animation: pdf2web-fade-out var(--pdf2web-anim, 280ms) ease-in forwards;
}