.site-main--lupe {
    box-sizing: border-box;
    width: min(1120px, calc(100% - 40px));
    margin-inline: auto;
    padding: clamp(4rem, 9vw, 8rem) 0 clamp(5rem, 10vw, 9rem);
}

.lupe-title-wrap {
    width: min(100%, 680px);
    margin-inline: auto;
}

.lupe-kicker {
    margin: 0 0 .75rem;
    color: var(--broschengold);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .18em;
    line-height: 1.3;
    text-transform: uppercase;
}

.lupe-page-title {
    margin: 0 0 clamp(1.5rem, 4vw, 3rem);
    font-size: clamp(2.7rem, 6vw, 5.4rem);
    font-weight: 400;
    line-height: 1.02;
    text-wrap: balance;
}

.lupe-subtitle {
    margin: 0 0 clamp(2rem, 5vw, 4rem);
    color: var(--kb-color-paper-muted, #d9d4c5);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-style: italic;
    line-height: 1.55;
}

.site-main--lupe .kb-object-facts {
    margin-bottom: clamp(3rem, 7vw, 5rem);
}

/* Äußerer Container (zentriert, etwas Abstand) */
.lupe-container {
    max-width: 520px;
    margin: clamp(3rem, 8vw, 6rem) auto;
    padding: 0 1rem;
}

/* Zwischenkarte – trägt den Abstand */
.lupe-panel {
    margin-bottom: 2.2rem;   /* sichtbarer Abstand */
}

/* Hauptgehäuse – hier sitzt der RAHMEN */
.lupe-wrapper {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;

    background: #000;
    overflow: hidden;

    /* organische Rundung */
    border-radius: 22px;

    /* SICHTBARER RAHMEN passend zu deinem Design */
    border: 2px solid rgba(246, 232, 195, 0.65); /* sanftes Gold/Beige */

    /* Glow, sichtbar auch auf tiefem Blau */
    box-shadow:
        0 0 35px rgba(246, 232, 195, 0.25),
        0 18px 30px rgba(0,0,0,0.55);
}

/* 9:16 Displayfläche */
.lupe-screen {
    width: 100%;
    aspect-ratio: 9 / 16;
    position: relative;
    overflow: hidden;
}

/* Bildfüllung */
.lupe-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay-Text unten */
.lupe-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 1rem;

    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);

    color: #f6e8c3;
    font-size: 1.1rem;
    line-height: 1.45;
}

.lupe-text p:last-child {
    margin-bottom: 0;
}

/* Headline oben */
.lupe-headline {
    position: absolute;
    top: 0;
    width: 100%;
    padding: .85rem 1rem;

    background: rgba(0,0,0,0.32);
    backdrop-filter: blur(4px);

    color: #f6e8c3;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    z-index: 1;
}

.lupe-context {
    width: 100%;
}

.lupe-context :where(.kb-object-sources, .kb-object-relations, .kb-object-exit) {
    margin-inline: auto;
}

.lupe-fallback {
    width: min(100%, 680px);
    margin: 3rem auto;
    font-size: clamp(1.05rem, 1.35vw, 1.18rem);
    line-height: 1.75;
}

/* ============================================
   DESKTOP – Lightbox (Handheld im Raum)
   ============================================ */
@media (min-width: 768px) {

    .lupe-container {
        max-width: 430px;
        margin: 4rem auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .lupe-wrapper {
        width: 100%;
        max-height: 90vh;
        aspect-ratio: 9 / 16;

        border-radius: 26px;

        /* derselbe sichtbare Rahmen, aber etwas definierter */
        border: 14px solid rgba(25, 19, 1, 0.7);
        box-shadow:
            0 0 45px rgba(246, 232, 195, 0.28),
            0 22px 42px rgba(0,0,0,0.55);
    }

    .lupe-screen {
        width: 100%;
        height: 100%;
    }

    .lupe-screen img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (max-width: 700px) {
    .site-main--lupe {
        width: min(100% - 28px, 1120px);
        padding-block: 3rem 5rem;
    }

    .lupe-container {
        padding-inline: 0;
    }

    .lupe-wrapper {
        border-radius: 16px;
    }
}