/* =========================================================
   16. ZITATE UND CODE
   ========================================================= */

:root {
    --hgbig: url(../../../images/complexion28/bg_main.png);

    /* Optional kleinere Variante für dekorative Ausschnitte */
    --hgbig-small:
        url(../../../images/complexion28/bg_main_small.webp);
}


blockquote {
    --quote-accent: var(--design);
    --quote-rail: clamp(58px, 6vw, 82px);

    position: relative;
    display: flow-root;
    min-width: 0;

    margin: var(--space-l) 0;
    padding:
        var(--space-l)
        var(--space-l)
        var(--space-l)
        calc(var(--quote-rail) + var(--space-l));

    overflow: hidden;

    color: var(--paper-muted);
    background:
        color-mix(
            in srgb,
            var(--tbl-main-tr2) 94%,
            transparent
        );

    border: 1px solid var(--hairline);
    border-left: 3px solid var(--quote-accent);
    border-radius: 0;

    line-height: 1.7;
    text-align: left;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   Bildstreifen
   --------------------------------------------------------- */
blockquote::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: var(--quote-rail);

    background-color: var(--bg-deep);
    background-image:
        linear-gradient(
            to bottom,
            color-mix(
                in srgb,
                var(--bg-deep) 30%,
                transparent
            ),
            color-mix(
                in srgb,
                var(--bg-deep) 78%,
                transparent
            )
        ),
        var(--hgbig-small, var(--hgbig));

    background-repeat: no-repeat;
    background-position: center center;

    background-size:
        auto,
        clamp(680px, 62vw, 980px) auto;

    background-attachment:
        scroll,
        fixed;

    border-right:
        1px solid
        color-mix(
            in srgb,
            var(--quote-accent) 52%,
            var(--hairline)
        );

    pointer-events: none;
}

/* ---------------------------------------------------------
   Zitatzeichen innerhalb des reservierten Streifens
   --------------------------------------------------------- */

blockquote::after {
    content: "◿";

    position: absolute;
    top: var(--space-s);
    left: 0;

    width: var(--quote-rail);

    color: var(--quote-accent);

    font-family: var(--akzenttext);
    font-size: var(--txtxxl);
    font-weight: 300;
    line-height: 1;

    text-align: center;

    pointer-events: none;
}


/* ---------------------------------------------------------
   Inhalt
   --------------------------------------------------------- */

blockquote > :first-child {
    margin-top: 0;
}

blockquote > :last-child {
    margin-bottom: 0;
}

blockquote > * {
    max-width: 100%;
}

blockquote img,
blockquote video,
blockquote iframe {
    max-width: 100%;
}


/* ---------------------------------------------------------
   MyBB-Zitatquelle
   --------------------------------------------------------- */

blockquote cite {
    display: block;

    margin: 0 0 var(--space-m);
    padding: 0 0 var(--space-s);

    color: var(--quote-accent);

    border-bottom:
        1px solid
        color-mix(
            in srgb,
            var(--quote-accent) 38%,
            var(--hairline)
        );

    font-style: normal;
    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.11em;
    line-height: 1.4;

    text-transform: uppercase;
}

blockquote cite a {
    color: inherit;
}


/* ---------------------------------------------------------
   Kontextfarben
   --------------------------------------------------------- */

.dossier-profile blockquote {
    --quote-accent: var(--profile-accent);
}

.correspondence-post blockquote {
    --quote-accent: var(--post-accent);
}

.pfm-card blockquote {
    --quote-accent: var(--pfm-accent);
}


/* ---------------------------------------------------------
   Verschachtelte Zitate
   --------------------------------------------------------- */

blockquote blockquote {
    --quote-rail: clamp(42px, 5vw, 58px);

    margin: var(--space-m) 0 0;

    padding:
        var(--space-m)
        var(--space-m)
        var(--space-m)
        calc(var(--quote-rail) + var(--space-m));

    background: var(--bg-deep);
}

blockquote blockquote::after {
    font-size: var(--txtxl);
}


/* ---------------------------------------------------------
   Mobil
   --------------------------------------------------------- */

@media (max-width: 600px) {

    blockquote {
        --quote-rail: 46px;

        margin: var(--space-m) 0;

        padding:
            var(--space-m)
            var(--space-m)
            var(--space-m)
            calc(var(--quote-rail) + var(--space-m));
    }

    blockquote::after {
        font-size: var(--txtxl);
    }
}

@media (max-width: 900px) {
    blockquote::before {
        background-attachment:
            scroll,
            scroll;

        background-size:
            auto,
            auto 100%;
    }
}

/* =========================================================
   CODE
   ========================================================= */

/* ---------------------------------------------------------
   Inline-Code
   --------------------------------------------------------- */

code {
    padding: 2px 5px;

    color: var(--paper);
    background: var(--bg-deep);

    border: 1px solid var(--hairline);
    border-radius: 0;

    font-family:
        "IBM Plex Mono",
        "Courier New",
        monospace;

    font-size: var(--txtsmall);
    line-height: inherit;
}

/* =========================================================
   02. ZITATE UND INFORMATIONSBLOCKE
   ========================================================= */



/* ---------------------------------------------------------
   Gemeinsame Codeblock-Variablen
   --------------------------------------------------------- */

pre,
.codeblock {
    --code-accent: var(--design);

    position: relative;

    max-width: 100%;
    margin: var(--space-l) 0;

    color: var(--paper-muted);
    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--code-accent) 7%,
                transparent
            ),
            transparent 38%
        ),
        var(--bg-deep);

    border: 1px solid var(--hairline);
    border-left: 3px solid var(--code-accent);
    border-radius: 0;
}


/* ---------------------------------------------------------
   Normales PRE
   --------------------------------------------------------- */

pre {
    padding: var(--space-l);

    overflow: auto;

    font-family:
        "IBM Plex Mono",
        "Courier New",
        monospace;

    font-size: var(--txtsmall);
    line-height: 1.65;

    tab-size: 4;
    white-space: pre;
}

pre::before {
    content: "CODE";

    display: block;

    margin:
        calc(-1 * var(--space-l))
        calc(-1 * var(--space-l))
        var(--space-m);

    padding:
        var(--space-s)
        var(--space-l);

    color: var(--code-accent);
    background:
        color-mix(
            in srgb,
            var(--tbl-main) 86%,
            transparent
        );

    border-bottom: 1px solid var(--hairline);

    font-family: var(--fliesstext);
    font-size: var(--txtxxsmall);
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;

    text-transform: uppercase;
}

pre code {
    display: block;

    min-width: max-content;
    padding: 0;

    color: inherit;
    background: transparent;

    border: 0;
}


/* ---------------------------------------------------------
   MyBB-Codeblock
   --------------------------------------------------------- */

.codeblock {
    overflow: hidden;
}

.codeblock .title {
    min-height: 38px;
    padding:
        var(--space-s)
        var(--space-l);

    color: var(--code-accent);
    background:
        color-mix(
            in srgb,
            var(--tbl-main) 86%,
            transparent
        );

    border-bottom: 1px solid var(--hairline);

    font-size: var(--txtxxsmall);
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.4;

    text-transform: uppercase;
}

.codeblock .title strong {
    color: inherit;
}

.codeblock .body {
    max-width: 100%;
    padding: var(--space-l);

    overflow: auto;

    color: var(--paper-muted);
    background: transparent;

    font-family:
        "IBM Plex Mono",
        "Courier New",
        monospace;

    font-size: var(--txtsmall);
    line-height: 1.65;

    white-space: pre;
    tab-size: 4;
}

.codeblock .body code {
    display: block;

    min-width: max-content;
    padding: 0;

    color: inherit;
    background: transparent;

    border: 0;
}


/* ---------------------------------------------------------
   Kontextfarben
   --------------------------------------------------------- */

.dossier-profile pre,
.dossier-profile .codeblock {
    --code-accent: var(--profile-accent);
}

.correspondence-post pre,
.correspondence-post .codeblock {
    --code-accent: var(--post-accent);
}

.pfm-card pre,
.pfm-card .codeblock {
    --code-accent: var(--pfm-accent);
}


/* ---------------------------------------------------------
   Code innerhalb eines Blockquotes
   --------------------------------------------------------- */

blockquote pre,
blockquote .codeblock {
    margin-right: 0;
    margin-left: 0;
}


/* ---------------------------------------------------------
   Mobil
   --------------------------------------------------------- */

@media (max-width: 600px) {
    pre,
    .codeblock .body {
        padding: var(--space-m);
    }

    pre::before {
        margin:
            calc(-1 * var(--space-m))
            calc(-1 * var(--space-m))
            var(--space-m);

        padding:
            var(--space-s)
            var(--space-m);
    }

    .codeblock .title {
        padding:
            var(--space-s)
            var(--space-m);
    }
}