/* ============================================================
   MHL – DATENSCHUTZ CALLOUTS EXAKT
   ============================================================ */


/*
 * Gemeinsame Basis für die beiden großen Hinweisboxen.
 *
 * Sehr spezifisch:
 *   body.scene-privacy
 *   main#content.site-main.shell
 *   section.reading-shell...
 *
 * Dadurch greifen alte globale r13/r*-Regeln nicht mehr.
 */


/* ============================================================
   1. ERSTER HINWEIS / KURZÜBERBLICK
   ============================================================ */

body.scene-privacy
main#content.site-main.shell
section.reading-shell.prose-page.protection-guide
> p:first-child {

    position: relative !important;

    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    margin:
        0 0 1.35rem
        0 !important;

    padding:
        1rem
        1.25rem
        1.05rem
        1.35rem !important;

    border:
        1px solid rgba(112, 228, 244, .30) !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(
            135deg,
            rgba(24, 120, 145, .30),
            rgba(4, 38, 56, .74)
        ) !important;

    color:
        rgba(239, 249, 251, .96) !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .17),
        inset 0 1px 0 rgba(255, 255, 255, .065) !important;

    overflow:
        hidden !important;

    backdrop-filter:
        blur(10px) saturate(1.05) !important;

    -webkit-backdrop-filter:
        blur(10px) saturate(1.05) !important;

    line-height:
        1.58 !important;

    overflow-wrap:
        anywhere !important;

    clip-path:
        inset(0 round 18px) !important;
}


/* ============================================================
   2. ZWEITER HINWEIS / URHEBERRECHT
   ============================================================ */

/*
 * Je nach älterem Stand ist das Urheberrecht entweder ein
 * .legal-warning oder ein direktes <p>.
 *
 * Beide Varianten werden exakt nur innerhalb der
 * Datenschutzseite angesprochen.
 */

body.scene-privacy
main#content.site-main.shell
section.reading-shell.prose-page.protection-guide
.legal-warning,

body.scene-privacy
main#content.site-main.shell
section.reading-shell.prose-page.protection-guide
> p.legal-warning {

    position: relative !important;

    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    margin:
        1.35rem 0 !important;

    padding:
        1rem
        1.25rem
        1.05rem
        1.35rem !important;

    border:
        1px solid rgba(245, 196, 92, .30) !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(
            135deg,
            rgba(88, 65, 24, .25),
            rgba(10, 37, 49, .77)
        ) !important;

    color:
        rgba(247, 239, 216, .96) !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .17),
        inset 0 1px 0 rgba(255, 255, 255, .05) !important;

    overflow:
        hidden !important;

    backdrop-filter:
        blur(10px) saturate(1.04) !important;

    -webkit-backdrop-filter:
        blur(10px) saturate(1.04) !important;

    line-height:
        1.58 !important;

    overflow-wrap:
        anywhere !important;

    clip-path:
        inset(0 round 18px) !important;
}


/* ============================================================
   3. DEZENTE AKZENTLINIE
   ============================================================ */

/* Cyan für die Kurzüberblick-Box */
body.scene-privacy
main#content.site-main.shell
section.reading-shell.prose-page.protection-guide
> p:first-child::before {

    content: "" !important;

    position: absolute !important;

    left: .68rem !important;

    top: .72rem !important;

    bottom: .72rem !important;

    width: 3px !important;

    border-radius: 999px !important;

    background:
        linear-gradient(
            180deg,
            rgba(112, 228, 244, .15),
            rgba(112, 228, 244, .95),
            rgba(112, 228, 244, .15)
        ) !important;

    box-shadow:
        0 0 12px rgba(112, 228, 244, .18) !important;

    pointer-events: none !important;
}


/* Gold für Urheberrecht */
body.scene-privacy
main#content.site-main.shell
section.reading-shell.prose-page.protection-guide
.legal-warning::before {

    content: "" !important;

    position: absolute !important;

    left: .68rem !important;

    top: .72rem !important;

    bottom: .72rem !important;

    width: 3px !important;

    border-radius: 999px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255, 214, 125, .15),
            rgba(255, 198, 82, .95),
            rgba(255, 214, 125, .15)
        ) !important;

    box-shadow:
        0 0 12px rgba(255, 198, 82, .16) !important;

    pointer-events: none !important;
}


/* ============================================================
   4. TEXT
   ============================================================ */

body.scene-privacy
main#content.site-main.shell
section.reading-shell.prose-page.protection-guide
> p:first-child,

body.scene-privacy
main#content.site-main.shell
section.reading-shell.prose-page.protection-guide
.legal-warning {

    font-size:
        1rem !important;

    font-weight:
        500 !important;

    letter-spacing:
        .003em !important;
}


/* Hervorgehobener Anfang */
body.scene-privacy
main#content.site-main.shell
section.reading-shell.prose-page.protection-guide
> p:first-child strong,

body.scene-privacy
main#content.site-main.shell
section.reading-shell.prose-page.protection-guide
.legal-warning strong {

    color:
        #ffffff !important;

    font-weight:
        850 !important;
}


/* ============================================================
   5. OBERE/UNTERE LICHTKANTE
   ============================================================ */

body.scene-privacy
main#content.site-main.shell
section.reading-shell.prose-page.protection-guide
> p:first-child::after {

    content: "" !important;

    position: absolute !important;

    top: 0 !important;

    left: 1.1rem !important;

    right: 1.1rem !important;

    height: 1px !important;

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

    pointer-events: none !important;
}


body.scene-privacy
main#content.site-main.shell
section.reading-shell.prose-page.protection-guide
.legal-warning::after {

    content: "" !important;

    position: absolute !important;

    top: 0 !important;

    left: 1.1rem !important;

    right: 1.1rem !important;

    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 205, 105, .27),
            transparent
        ) !important;

    pointer-events: none !important;
}


/* ============================================================
   6. HOVER
   ============================================================ */

@media (hover: hover) {

    body.scene-privacy
    main#content.site-main.shell
    section.reading-shell.prose-page.protection-guide
    > p:first-child,
    body.scene-privacy
    main#content.site-main.shell
    section.reading-shell.prose-page.protection-guide
    .legal-warning {

        transition:
            border-color .18s ease,
            box-shadow .18s ease,
            transform .18s ease !important;
    }

    body.scene-privacy
    main#content.site-main.shell
    section.reading-shell.prose-page.protection-guide
    > p:first-child:hover {

        border-color:
            rgba(112, 228, 244, .50) !important;

        box-shadow:
            0 14px 36px rgba(0, 0, 0, .20),
            0 0 20px rgba(112, 228, 244, .05),
            inset 0 1px 0 rgba(255, 255, 255, .075) !important;

        transform:
            translateY(-1px) !important;
    }

    body.scene-privacy
    main#content.site-main.shell
    section.reading-shell.prose-page.protection-guide
    .legal-warning:hover {

        border-color:
            rgba(245, 196, 92, .48) !important;

        box-shadow:
            0 14px 36px rgba(0, 0, 0, .20),
            0 0 20px rgba(255, 198, 82, .04),
            inset 0 1px 0 rgba(255, 255, 255, .06) !important;

        transform:
            translateY(-1px) !important;
    }
}


/* ============================================================
   7. TABLET
   ============================================================ */

@media (max-width: 900px) {

    body.scene-privacy
    main#content.site-main.shell
    section.reading-shell.prose-page.protection-guide
    > p:first-child,

    body.scene-privacy
    main#content.site-main.shell
    section.reading-shell.prose-page.protection-guide
    .legal-warning {

        padding:
            .92rem
            1rem
            .96rem
            1.2rem !important;

        border-radius:
            16px !important;

        clip-path:
            inset(0 round 16px) !important;

        font-size:
            .96rem !important;

        line-height:
            1.53 !important;
    }
}


/* ============================================================
   8. MOBIL
   ============================================================ */

@media (max-width: 600px) {

    body.scene-privacy
    main#content.site-main.shell
    section.reading-shell.prose-page.protection-guide
    > p:first-child,

    body.scene-privacy
    main#content.site-main.shell
    section.reading-shell.prose-page.protection-guide
    .legal-warning {

        margin-block:
            .85rem !important;

        padding:
            .82rem
            .82rem
            .86rem
            1.05rem !important;

        border-radius:
            15px !important;

        clip-path:
            inset(0 round 15px) !important;

        font-size:
            .91rem !important;

        line-height:
            1.50 !important;
    }

    body.scene-privacy
    main#content.site-main.shell
    section.reading-shell.prose-page.protection-guide
    > p:first-child::before,

    body.scene-privacy
    main#content.site-main.shell
    section.reading-shell.prose-page.protection-guide
    .legal-warning::before {

        left:
            .56rem !important;

        top:
            .58rem !important;

        bottom:
            .58rem !important;

        width:
            2px !important;
    }
}


/* ============================================================
   9. SEHR KLEINE DISPLAYS
   ============================================================ */

@media (max-width: 420px) {

    body.scene-privacy
    main#content.site-main.shell
    section.reading-shell.prose-page.protection-guide
    > p:first-child,

    body.scene-privacy
    main#content.site-main.shell
    section.reading-shell.prose-page.protection-guide
    .legal-warning {

        padding:
            .74rem
            .72rem
            .78rem
            .92rem !important;

        border-radius:
            13px !important;

        clip-path:
            inset(0 round 13px) !important;

        font-size:
            .88rem !important;

        line-height:
            1.47 !important;
    }
}