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


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

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

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

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


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

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

body.mw-page-galerie-ben
section.mw-ben-intro p{
    color:#52636d !important;
}


/* =========================================================
   STIL & FOKUS
========================================================= */

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


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


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


/* zusätzliche Absicherung dunkler Infoboxen */

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

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

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

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

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

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

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

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


/* =========================================================
   02 · GALERIE
   Mehrere ruhige Farbwellen
========================================================= */

body.mw-page-galerie-ben
main#seiteninhalt
section.mw-ben-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 aus dem Intro */
            #dce1e3 0%,
            #dce1e3 7%,

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

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

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

    padding-bottom:170px !important;
}


/* Galerieinhalt über der Schlusswelle */

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


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

body.mw-page-galerie-ben
section.mw-ben-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-ben
section.mw-ben-gallery{
    color:#172129;
}


body.mw-page-galerie-ben
section.mw-ben-gallery h2{
    color:#172129 !important;
}


body.mw-page-galerie-ben
section.mw-ben-gallery p{
    color:#52636d !important;
}


body.mw-page-galerie-ben
section.mw-ben-gallery [class*="item"],
body.mw-page-galerie-ben
section.mw-ben-gallery figure{
    box-shadow:
        0 14px 34px rgba(25,40,49,.10);
}


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

body.mw-page-galerie-ben
main#seiteninhalt
section.mw-ben-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;
}


/* auch alten CTA-After-Effekt entfernen */

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