.info-popup {
    --info-popup-gap: clamp(1rem, 3vw, 3rem);
    box-sizing: border-box;
    width: min(60rem, calc(100% - 2 * var(--info-popup-gap)));
    max-width: calc(100% - 2 * var(--info-popup-gap));
    max-height: calc(100vh - 2 * var(--info-popup-gap));
    max-height: calc(100dvh - 2 * var(--info-popup-gap));
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(127, 95, 65, .24);
    border-radius: 1.4rem;
    background: #fffaf4;
    color: #3f2b1c;
    box-shadow: 0 24px 64px rgba(38, 24, 12, .3);
    font: inherit;
}
.info-popup[open] { display: flex; flex-direction: column; }
.info-popup::backdrop { background: rgba(38, 24, 12, .55); }
html:has(.info-popup[open]) { overflow: hidden; }
.info-popup__scroll {
    min-height: 0;
    padding: clamp(1.15rem, 3vw, 2.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-wrap: anywhere;
}
.info-popup__title {
    margin: 0 0 1rem;
    color: #4d3420;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.3;
    outline: none;
}
.info-popup__text { white-space: pre-wrap; line-height: 1.45; }
.info-popup__footer {
    flex: 0 0 auto;
    padding: 1rem clamp(1.15rem, 3vw, 2.5rem);
    border-top: 1px solid rgba(127, 95, 65, .16);
    text-align: right;
}
.info-popup__error { margin: 0 0 .75rem; color: #8e2119; text-align: left; }
.info-popup__button {
    min-height: 2.75rem;
    padding: .7rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #7c5537, #69472f);
    color: #fff9f4;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.info-popup__button:disabled { opacity: .6; cursor: wait; }
.info-popup__button:focus-visible, .info-popup__scroll:focus-visible {
    outline: 3px solid #946943;
    outline-offset: -3px;
}

/*
 * Kompakte Variante (wie die kleinen Entscheidungsdialoge der Bücherseite): nur so groß wie der Inhalt,
 * höchstens 30rem breit, auf schmalen Bildschirmen volle Breite abzüglich Rand.
 */
.info-popup.info-popup--compact {
    width: fit-content;
    min-width: min(18rem, calc(100% - 2rem));
    max-width: min(30rem, calc(100% - 2rem));
    border-radius: 1rem;
}
.info-popup--compact .info-popup__scroll { padding: 1.25rem 1.25rem 0.85rem; }
.info-popup--compact .info-popup__title { margin: 0 0 0.6rem; font-size: 1.3rem; }
.info-popup--compact .info-popup__text { white-space: normal; }
.info-popup--compact .info-popup__footer { padding: 0 1.25rem 1.25rem; border-top: 0; }
.info-popup--compact .info-popup__button { min-height: 2.4rem; padding: 0.55rem 1.25rem; }