/* ============================================================
   MHL – INFO CALLOUTS FINAL
   ============================================================ */


/* ------------------------------------------------------------
   1. Gemeinsame Grundform
   ------------------------------------------------------------ */

body.scene-privacy
.reading-shell.prose-page
:is(
    .mhl-callout,
    .legal-warning,
    .privacy-summary,
    .notice,
    .summary,
    .callout
) {
    position: relative;

    box-sizing: border-box;

    margin-block: 1.15rem;

    padding: 1.05rem 1.25rem 1.1rem;

    border: 1px solid rgba(112, 228, 244, .22);

    border-radius: 18px !important;

    background:
        linear-gradient(
            135deg,
            rgba(20, 111, 136, .24),
            rgba(3, 35, 53, .74)
        );

    box-shadow:
        0 12px 34px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .065);

    backdrop-filter: blur(12px) saturate(1.08);

    -webkit-backdrop-filter:
        blur(12px) saturate(1.08);

    overflow: hidden;
}


/* ------------------------------------------------------------
   2. Elegante Akzentlinie links
   ------------------------------------------------------------ */

body.scene-privacy
.reading-shell.prose-page
:is(
    .mhl-callout,
    .legal-warning,
    .privacy-summary,
    .notice,
    .summary,
    .callout
)::before {
    content: "";

    position: absolute;

    left: 0.7rem;
    top: 0.7rem;
    bottom: 0.7rem;

    width: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(112, 228, 244, .18),
            rgba(112, 228, 244, .9),
            rgba(112, 228, 244, .18)
        );

    box-shadow:
        0 0 12px rgba(112, 228, 244, .20);
}


/* ------------------------------------------------------------
   3. Dezente obere Lichtkante
   ------------------------------------------------------------ */

body.scene-privacy
.reading-shell.prose-page
:is(
    .mhl-callout,
    .legal-warning,
    .privacy-summary,
    .notice,
    .summary,
    .callout
)::after {
    content: "";

    position: absolute;

    left: 1.15rem;
    right: 1.15rem;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(112, 228, 244, .28),
            transparent
        );

    pointer-events: none;
}


/* ------------------------------------------------------------
   4. Text sauber einrücken
   ------------------------------------------------------------ */

body.scene-privacy
.reading-shell.prose-page
:is(
    .mhl-callout,
    .legal-warning,
    .privacy-summary,
    .notice,
    .summary,
    .callout
) > :first-child {
    margin-top: 0;
}


body.scene-privacy
.reading-shell.prose-page
:is(
    .mhl-callout,
    .legal-warning,
    .privacy-summary,
    .notice,
    .summary,
    .callout
) > :last-child {
    margin-bottom: 0;
}


/* ------------------------------------------------------------
   5. Absatz
   ------------------------------------------------------------ */

body.scene-privacy
.reading-shell.prose-page
:is(
    .mhl-callout,
    .legal-warning,
    .privacy-summary,
    .notice,
    .summary,
    .callout
) p {
    margin: 0;

    padding-left: .45rem;

    color: rgba(235, 248, 251, .94);

    line-height: 1.58;

    font-size: 1rem;

    overflow-wrap: anywhere;
}


/* ------------------------------------------------------------
   6. Fett hervorgehobener Beginn
   ------------------------------------------------------------ */

body.scene-privacy
.reading-shell.prose-page
:is(
    .mhl-callout,
    .legal-warning,
    .privacy-summary,
    .notice,
    .summary,
    .callout
) p strong {
    color: #f5fbfd;

    font-weight: 850;

    letter-spacing: .005em;
}


/* ------------------------------------------------------------
   7. Datenschutz-Kurzüberblick etwas stärker hervorheben
   ------------------------------------------------------------ */

body.scene-privacy
.reading-shell.prose-page
.privacy-summary {
    border-color:
        rgba(112, 228, 244, .30);

    background:
        linear-gradient(
            135deg,
            rgba(20, 121, 146, .30),
            rgba(4, 43, 63, .78)
        );

    box-shadow:
        0 14px 38px rgba(0, 0, 0, .20),
        0 0 24px rgba(56, 217, 238, .06),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}


/* ------------------------------------------------------------
   8. Urheberrecht optisch etwas ruhiger
   ------------------------------------------------------------ */

body.scene-privacy
.reading-shell.prose-page
.legal-warning {
    border-color:
        rgba(243, 180, 94, .22);

    background:
        linear-gradient(
            135deg,
            rgba(82, 60, 24, .22),
            rgba(12, 37, 48, .76)
        );
}


/* Gold-Akzent für Urheberrecht */
body.scene-privacy
.reading-shell.prose-page
.legal-warning::before {
    background:
        linear-gradient(
            180deg,
            rgba(255, 208, 114, .15),
            rgba(255, 198, 85, .90),
            rgba(255, 208, 114, .15)
        );

    box-shadow:
        0 0 12px rgba(255, 198, 85, .16);
}


/* ------------------------------------------------------------
   9. Hover nur dezent
   ------------------------------------------------------------ */

@media (hover: hover) {

    body.scene-privacy
    .reading-shell.prose-page
    :is(
        .mhl-callout,
        .legal-warning,
        .privacy-summary,
        .notice,
        .summary,
        .callout
    ) {
        transition:
            transform .18s ease,
            border-color .18s ease,
            box-shadow .18s ease;
    }

    body.scene-privacy
    .reading-shell.prose-page
    :is(
        .mhl-callout,
        .legal-warning,
        .privacy-summary,
        .notice,
        .summary,
        .callout
    ):hover {
        transform: translateY(-1px);

        border-color:
            rgba(112, 228, 244, .34);

        box-shadow:
            0 16px 40px rgba(0, 0, 0, .22),
            inset 0 1px 0 rgba(255, 255, 255, .075);
    }

    body.scene-privacy
    .reading-shell.prose-page
    .legal-warning:hover {
        border-color:
            rgba(243, 180, 94, .34);
    }
}


/* ------------------------------------------------------------
   10. Tablet
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    body.scene-privacy
    .reading-shell.prose-page
    :is(
        .mhl-callout,
        .legal-warning,
        .privacy-summary,
        .notice,
        .summary,
        .callout
    ) {
        padding: .95rem 1.05rem 1rem;

        border-radius: 16px !important;
    }

    body.scene-privacy
    .reading-shell.prose-page
    :is(
        .mhl-callout,
        .legal-warning,
        .privacy-summary,
        .notice,
        .summary,
        .callout
    ) p {
        font-size: .96rem;

        line-height: 1.55;
    }
}


/* ------------------------------------------------------------
   11. Mobil
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    body.scene-privacy
    .reading-shell.prose-page
    :is(
        .mhl-callout,
        .legal-warning,
        .privacy-summary,
        .notice,
        .summary,
        .callout
    ) {
        margin-block: .85rem;

        padding:
            .88rem
            .85rem
            .9rem
            1rem;

        border-radius: 15px !important;
    }

    body.scene-privacy
    .reading-shell.prose-page
    :is(
        .mhl-callout,
        .legal-warning,
        .privacy-summary,
        .notice,
        .summary,
        .callout
    )::before {
        left: .58rem;
        top: .58rem;
        bottom: .58rem;
        width: 2px;
    }

    body.scene-privacy
    .reading-shell.prose-page
    :is(
        .mhl-callout,
        .legal-warning,
        .privacy-summary,
        .notice,
        .summary,
        .callout
    ) p {
        padding-left: .18rem;

        font-size: .91rem;

        line-height: 1.5;
    }
}


/* ------------------------------------------------------------
   12. Sehr kleine Displays
   ------------------------------------------------------------ */

@media (max-width: 420px) {

    body.scene-privacy
    .reading-shell.prose-page
    :is(
        .mhl-callout,
        .legal-warning,
        .privacy-summary,
        .notice,
        .summary,
        .callout
    ) {
        padding:
            .78rem
            .72rem
            .82rem
            .9rem;

        border-radius: 13px !important;
    }
}