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


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

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

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

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


/* =========================================================
   01 · INTRO
   Hero -> heller Inhaltsbereich
========================================================= */

body.mw-page-galerie-manolo
main#seiteninhalt
section.mw-manolo-intro.mw-h-flow{
    --mw-flow-from:#172229;
    --mw-flow-bg:#dce1e3;
    --mw-flow-text:#172129;

    margin:0 !important;

    background:
        linear-gradient(
            180deg,
            #718089 0%,
            #8e9ca3 6%,
            #a9b5ba 13%,
            #c0c9ce 21%,
            #d0d7da 30%,
            #d9dfe1 40%,
            #dce1e3 52%,
            #dce1e3 100%
        ) !important;

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


/* ---------------------------------------------------------
   INTRO – Fließtext auf hellem Hintergrund
--------------------------------------------------------- */

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


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


/* =========================================================
   STIL & FOKUS
   Rechte dunkle Infobox
========================================================= */

/* tatsächliche Titel:
   Dotwork / Mandala / Geometrie / Individuelle Konzepte */

body.mw-page-galerie-manolo
.mw-manolo-facts .mw-manolo-fact strong{
    color:#f2f5f6 !important;
    -webkit-text-fill-color:#f2f5f6 !important;
    opacity:1 !important;
}


/* Beschreibungen darunter */

body.mw-page-galerie-manolo
.mw-manolo-facts .mw-manolo-fact small{
    color:#bdc7cc !important;
    -webkit-text-fill-color:#bdc7cc !important;
    opacity:1 !important;
}


/* Nummern bleiben blau */

body.mw-page-galerie-manolo
.mw-manolo-facts .mw-manolo-fact > span{
    color:#00aeef !important;
    -webkit-text-fill-color:#00aeef !important;
    opacity:1 !important;
}


/* allgemeine Absicherung dunkler Introboxen */

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

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

body.mw-page-galerie-manolo
section.mw-manolo-intro [class*="panel"] strong,

body.mw-page-galerie-manolo
section.mw-manolo-intro [class*="focus"] h3,

body.mw-page-galerie-manolo
section.mw-manolo-intro [class*="focus"] h4,

body.mw-page-galerie-manolo
section.mw-manolo-intro [class*="card"] h3,

body.mw-page-galerie-manolo
section.mw-manolo-intro [class*="panel"] h3{
    color:#f2f5f6 !important;
    -webkit-text-fill-color:#f2f5f6 !important;
}


/* =========================================================
   02 · GALERIE
   Mehrere ruhige Wellen über den gesamten Bereich
========================================================= */

body.mw-page-galerie-manolo
main#seiteninhalt
section.mw-manolo-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,

            /* nahtlos aus dem Intro */
            #dce1e3 0%,
            #dce1e3 7%,

            /* erste sanfte Welle dunkler */
            #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 über dem Hintergrund */

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


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

body.mw-page-galerie-manolo
section.mw-manolo-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 – TEXT & BILDER
========================================================= */

body.mw-page-galerie-manolo
section.mw-manolo-gallery{
    color:#172129;
}


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


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


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

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


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

body.mw-page-galerie-manolo
main#seiteninhalt
section.mw-manolo-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 entfernen */

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