/* =========================================================
   HARMONIC PAGE FLOW
   galerie-patrick-piercer.php
   CLEAN FINAL
========================================================= */


/* =========================================================
   BASIS
   Alte mw-h-flow-Pseudoverläufe neutralisieren
========================================================= */

body.mw-page-galerie-patrick-piercer
main#seiteninhalt section.mw-pp-warning.mw-h-flow::before,

body.mw-page-galerie-patrick-piercer
main#seiteninhalt section.mw-pp-intro.mw-h-flow::before,

body.mw-page-galerie-patrick-piercer
main#seiteninhalt section.mw-pp-gallery.mw-h-flow::before,

body.mw-page-galerie-patrick-piercer
main#seiteninhalt section.mw-pp-cta.mw-h-flow::before{
    content:none !important;
    display:none !important;
}


/* =========================================================
   01 · WARNING
   Hero-Dunkel -> mittleres Slate
========================================================= */

body.mw-page-galerie-patrick-piercer
main#seiteninhalt
section.mw-pp-warning.mw-h-flow{
    --mw-flow-from:#172229;
    --mw-flow-bg:#71808a;
    --mw-flow-text:#edf1f2;

    margin:0 !important;

    background:
        linear-gradient(
            180deg,
            #172229 0%,
            #1e2c34 12%,
            #293840 24%,
            #35454e 36%,
            #42525b 48%,
            #505f68 60%,
            #5e6e76 74%,
            #697981 87%,
            #71808a 100%
        ) !important;

    border:0 !important;
    outline:0 !important;
}


/* Warning-Texte */

body.mw-page-galerie-patrick-piercer
section.mw-pp-warning h2,

body.mw-page-galerie-patrick-piercer
section.mw-pp-warning h3{
    color:#f1f4f5 !important;
    -webkit-text-fill-color:#f1f4f5 !important;
}

body.mw-page-galerie-patrick-piercer
section.mw-pp-warning p{
    color:#c2ccd0 !important;
    -webkit-text-fill-color:#c2ccd0 !important;
}


/* =========================================================
   02 · INTRO
   Slate -> heller Inhaltsbereich
========================================================= */

body.mw-page-galerie-patrick-piercer
main#seiteninhalt
section.mw-pp-intro.mw-h-flow{
    --mw-flow-from:#71808a;
    --mw-flow-bg:#dce1e3;
    --mw-flow-text:#172129;

    margin-top:-1px !important;

    background:
        linear-gradient(
            180deg,
            #71808a 0%,
            #839198 7%,
            #96a3aa 14%,
            #a8b4ba 22%,
            #b9c3c8 30%,
            #c7d0d4 39%,
            #d2d9dc 49%,
            #d9dfe1 60%,
            #dce1e3 72%,
            #dce1e3 100%
        ) !important;

    border:0 !important;
    outline:0 !important;
}


/* Intro-Fließtext lesbarer */

body.mw-page-galerie-patrick-piercer
section.mw-pp-intro p{
    color:#52636d !important;
    -webkit-text-fill-color:#52636d !important;
}


/* Große Headlines im hellen Intro */

body.mw-page-galerie-patrick-piercer
section.mw-pp-intro h2{
    color:#172129 !important;
    -webkit-text-fill-color:#172129 !important;
}


/* =========================================================
   DUNKLE INFO-/FAKTENBOX IM INTRO
   Titel hell, Beschreibungen gedämpft
========================================================= */

/* tatsächliche Fact-Strukturen allgemein absichern */

body.mw-page-galerie-patrick-piercer
section.mw-pp-intro [class*="fact"] strong,

body.mw-page-galerie-patrick-piercer
section.mw-pp-intro [class*="focus"] strong,

body.mw-page-galerie-patrick-piercer
section.mw-pp-intro [class*="card"] strong,

body.mw-page-galerie-patrick-piercer
section.mw-pp-intro [class*="panel"] strong{
    color:#f2f5f6 !important;
    -webkit-text-fill-color:#f2f5f6 !important;
    opacity:1 !important;
}


/* Beschreibung darunter */

body.mw-page-galerie-patrick-piercer
section.mw-pp-intro [class*="fact"] small,

body.mw-page-galerie-patrick-piercer
section.mw-pp-intro [class*="focus"] small,

body.mw-page-galerie-patrick-piercer
section.mw-pp-intro [class*="card"] small,

body.mw-page-galerie-patrick-piercer
section.mw-pp-intro [class*="panel"] small{
    color:#bdc7cc !important;
    -webkit-text-fill-color:#bdc7cc !important;
    opacity:1 !important;
}


/* Nummern / kleine Akzentlabels blau */

body.mw-page-galerie-patrick-piercer
section.mw-pp-intro [class*="fact"] > span{
    color:#00aeef !important;
    -webkit-text-fill-color:#00aeef !important;
    opacity:1 !important;
}


/* =========================================================
   03 · GALERIE
   Mehrere ruhige Wellen statt kilometerlang Hell
========================================================= */

body.mw-page-galerie-patrick-piercer
main#seiteninhalt
section.mw-pp-gallery.mw-h-flow{
    --mw-flow-from:#dce1e3;
    --mw-flow-bg:#33434c;
    --mw-flow-text:#172129;

    position:relative;

    margin-top:-1px !important;

    overflow:hidden;
    isolation:isolate;

    border:0 !important;
    outline:0 !important;

    background:
        linear-gradient(
            180deg,

            /* nahtloser Start */
            #dce1e3 0%,
            #dce1e3 7%,

            /* erste sanfte Welle */
            #d6dcdf 14%,
            #ccd4d8 22%,
            #bec8cc 30%,
            #afb9be 38%,

            /* wieder heller */
            #b8c2c7 45%,
            #c4cdd1 52%,
            #ced6da 59%,
            #d5dcdf 65%,

            /* zweite Welle */
            #c9d1d5 71%,
            #bac4c9 77%,
            #a8b4ba 82%,
            #93a0a7 87%,
            #7d8c94 91%,
            #687880 95%,
            #52626b 98%,
            #405059 100%
        ) !important;

    padding-bottom:170px !important;
}


/* Galerieinhalt oberhalb des Schlussverlaufs */

body.mw-page-galerie-patrick-piercer
section.mw-pp-gallery.mw-h-flow > *{
    position:relative;
    z-index:2;
}


/* =========================================================
   SCHLUSSWELLE
   Galerie -> dunkle CTA
========================================================= */

body.mw-page-galerie-patrick-piercer
section.mw-pp-gallery.mw-h-flow::after{
    content:"" !important;
    display:block !important;

    position:absolute;

    left:-10%;
    right:-10%;
    bottom:-1px;

    height:clamp(280px,29vw,490px);

    z-index:1;
    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(23,34,41,0) 0%,
            rgba(23,34,41,.04) 12%,
            rgba(23,34,41,.10) 24%,
            rgba(23,34,41,.20) 36%,
            rgba(23,34,41,.34) 49%,
            rgba(23,34,41,.50) 62%,
            rgba(23,34,41,.67) 74%,
            rgba(23,34,41,.82) 85%,
            rgba(23,34,41,.94) 94%,
            #172229 100%
        ) !important;

    border:0 !important;

    border-radius:
        54% 46% 0 0 /
        18% 14% 0 0;

    transform:scaleX(1.08);
}


/* =========================================================
   GALERIE – TEXTE & BILDER
========================================================= */

body.mw-page-galerie-patrick-piercer
section.mw-pp-gallery{
    color:#172129;
}


body.mw-page-galerie-patrick-piercer
section.mw-pp-gallery h2{
    color:#172129 !important;
    -webkit-text-fill-color:#172129 !important;
}


body.mw-page-galerie-patrick-piercer
section.mw-pp-gallery p{
    color:#52636d !important;
    -webkit-text-fill-color:#52636d !important;
}


body.mw-page-galerie-patrick-piercer
section.mw-pp-gallery [class*="item"],

body.mw-page-galerie-patrick-piercer
section.mw-pp-gallery figure{
    box-shadow:
        0 14px 34px rgba(25,40,49,.10);
}


/* =========================================================
   04 · CTA
   Galerie endet bereits dunkel
========================================================= */

body.mw-page-galerie-patrick-piercer
main#seiteninhalt
section.mw-pp-cta.mw-h-flow{
    --mw-flow-from:#172229;
    --mw-flow-bg:#172229;
    --mw-flow-text:#edf1f2;

    margin-top:-1px !important;

    background:#172229 !important;

    border:0 !important;
    outline:0 !important;
}


/* Alten CTA-After-Effekt ebenfalls ausschalten */

body.mw-page-galerie-patrick-piercer
main#seiteninhalt
section.mw-pp-cta.mw-h-flow::after{
    content:none !important;
    display:none !important;
}

/* =========================================================
   MOBILE · PATRICK PIERCER – INTRO DUNKLER
========================================================= */

@media(max-width:700px){

    body.mw-page-galerie-patrick-piercer
    section.mw-pp-intro h2{
        color:#101a1f !important;
        -webkit-text-fill-color:#101a1f !important;
    }

    body.mw-page-galerie-patrick-piercer
    section.mw-pp-intro p{
        color:#18272e !important;
        -webkit-text-fill-color:#18272e !important;
        opacity:1 !important;
    }

}