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


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

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

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

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


/* =========================================================
   01 · INTRO
   Bewusst dunkler Start direkt nach dem Hero
========================================================= */

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

    margin:0 !important;

    background:
        linear-gradient(
            180deg,

            #26353d 0%,
            #304049 6%,
            #3d4d56 12%,
            #4d5d66 19%,

            #607079 27%,
            #75848d 35%,
            #8b99a1 43%,

            #a0adb3 52%,
            #b3bec3 61%,
            #c2ccd1 70%,
            #ced6da 79%,
            #d7dde0 88%,
            #dce1e3 100%
        ) !important;

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

    padding-top:145px !important;
    padding-bottom:145px !important;
}


/* =========================================================
   INTRO – LESBARKEIT
========================================================= */

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

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


/* =========================================================
   DUNKLE INFO-/FOKUSBOX IM INTRO
========================================================= */

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

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

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

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


/* Beschreibungen darunter */

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

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

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

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


/* Nummern / Akzentlabels blau */

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


/* zusätzliche Überschriften in dunklen Boxen */

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

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

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

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

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

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


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

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

            #dce1e3 0%,
            #dce1e3 6%,

            #d5dcdf 13%,
            #cbd3d7 20%,
            #bdc7cc 28%,
            #adb8bd 36%,

            #b7c2c7 43%,
            #c4cdd1 50%,
            #ced6da 57%,
            #d6dcdf 64%,

            #ccd4d8 70%,
            #bdc7cc 76%,
            #adb8bd 81%,
            #9aa7ad 86%,

            #85939a 90%,
            #708088 94%,
            #5c6c74 97%,
            #485963 99%,
            #405059 100%
        ) !important;

    padding-bottom:175px !important;
}


/* Galerieinhalt bleibt über dem Verlauf */

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


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

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

    position:absolute;

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

    height:clamp(300px,30vw,510px);

    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-robin
section.mw-robin-gallery{
    color:#172129;
}

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

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

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

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


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

body.mw-page-galerie-robin
main#seiteninhalt
section.mw-robin-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-robin
main#seiteninhalt
section.mw-robin-cta.mw-h-flow::after{
    content:none !important;
    display:none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    body.mw-page-galerie-robin
    main#seiteninhalt
    section.mw-robin-intro.mw-h-flow{
        padding-top:115px !important;
        padding-bottom:110px !important;
    }

    body.mw-page-galerie-robin
    main#seiteninhalt
    section.mw-robin-gallery.mw-h-flow{
        padding-bottom:125px !important;
    }

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

    body.mw-page-galerie-robin
    section.mw-robin-intro p{
        color:#d7e0e4 !important;
        -webkit-text-fill-color:#d7e0e4 !important;
        opacity:1 !important;
    }
}

.mw-robin-gallery-item img.mw-robin-rotate-90 {
    transform: rotate(90deg) scale(1.25);
}

.mw-robin-gallery-item:hover img.mw-robin-rotate-90,
.mw-robin-gallery-item:focus-visible img.mw-robin-rotate-90 {
    transform: rotate(90deg) scale(1.28);
}