/* =========================================================
   MOST WANTED – BODY MODIFICATION BERLIN
   HARMONIC CLEAN FINAL
   Bereinigte Komplettfassung
========================================================= */


/* =========================================================
   0. BASIS
   Diese Datei steuert die Übergänge vollständig selbst.
========================================================= */

body.mw-page-body-modification-berlin .bm-page,
body.mw-page-body-modification-berlin main#seiteninhalt{
    overflow:visible !important;
}

body.mw-page-body-modification-berlin .bm-page{
    --bm-bg:#dce1e3;
    --bm-panel:#d2d9dc;
    --bm-panel-2:#c3cdd1;
    --bm-line:rgba(30,48,58,.13);
    --bm-muted:#5b6971;
    --bm-soft:#2e3d45;

    background:#172229;
}

body.mw-page-body-modification-berlin .bm-page > section{
    position:relative;
    margin:0 !important;
    border:0 !important;
    outline:0 !important;
    background-clip:border-box;
}

body.mw-page-body-modification-berlin .bm-page > section.mw-h-flow::before,
body.mw-page-body-modification-berlin .bm-page > section.mw-h-flow::after{
    content:none !important;
    display:none !important;
}


/* =========================================================
   1. INTRO
   Hero -> hell
========================================================= */

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

    background:
        linear-gradient(
            180deg,
            #718089 0%,
            #9ba8ae 5%,
            #bbc5ca 11%,
            #d0d7da 18%,
            #dce1e3 27%,
            #dce1e3 100%
        ) !important;

    padding-bottom:150px !important;
}

body.mw-page-body-modification-berlin .bm-intro h1,
body.mw-page-body-modification-berlin .bm-intro h2{
    color:#172129 !important;
}

body.mw-page-body-modification-berlin .bm-intro p{
    color:#596870 !important;
}

body.mw-page-body-modification-berlin .bm-intro p strong{
    color:#3f4f58 !important;
    -webkit-text-fill-color:#3f4f58 !important;
}


/* dekorative große Nummer im Intro besser sichtbar */
body.mw-page-body-modification-berlin .bm-intro [class*="number"],
body.mw-page-body-modification-berlin .bm-intro [class*="index"],
body.mw-page-body-modification-berlin .bm-intro [class*="card"] > span:first-child{
    color:rgba(0,174,239,.18) !important;
    -webkit-text-fill-color:rgba(0,174,239,.18) !important;
    opacity:1 !important;
}


/* =========================================================
   2. SPRUNGNAVIGATION
   Desktop: links am Viewport, komplett ausgeklappt, sticky.
   WICHTIG: nur echte Klassen – kein :has(), keine Doppelregeln.
========================================================= */

@media (min-width:1181px){

    body.mw-page-body-modification-berlin .bm-jumpbar{
        position:sticky !important;
        top:110px !important;
        left:0 !important;
        z-index:50 !important;

        width:0 !important;
        min-width:0 !important;
        max-width:0 !important;

        height:0 !important;
        min-height:0 !important;
        max-height:0 !important;

        margin:0 !important;
        padding:0 !important;

        overflow:visible !important;

        background:transparent !important;
        background-color:transparent !important;
        background-image:none !important;

        border:0 !important;
        border-radius:0 !important;
        outline:0 !important;

        box-shadow:none !important;
        filter:none !important;
        backdrop-filter:none !important;

        pointer-events:none;
    }

    body.mw-page-body-modification-berlin .bm-jumpbar::before,
    body.mw-page-body-modification-berlin .bm-jumpbar::after{
        content:none !important;
        display:none !important;
    }

    body.mw-page-body-modification-berlin .bm-jumpbar .bm-jumpbar-inner{
        position:absolute !important;
        top:0 !important;
        left:18px !important;

        display:flex !important;
        flex-direction:column !important;
        flex-wrap:nowrap !important;
        gap:0 !important;

        width:225px !important;
        min-width:225px !important;
        max-width:225px !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        margin:0 !important;
        padding:18px 18px !important;

        overflow:visible !important;
        overflow-x:visible !important;
        overflow-y:visible !important;

        white-space:normal !important;

        background:
            linear-gradient(
                180deg,
                rgba(19,30,36,.98),
                rgba(13,22,27,.98)
            ) !important;

        border:1px solid rgba(0,174,239,.14) !important;
        border-radius:14px !important;

        box-shadow:
            0 18px 42px rgba(22,37,45,.18) !important;

        pointer-events:auto;
        scrollbar-width:none !important;
    }

    body.mw-page-body-modification-berlin
    .bm-jumpbar .bm-jumpbar-inner::-webkit-scrollbar{
        display:none !important;
        width:0 !important;
        height:0 !important;
    }

    /* bm-jumpbar-inner ist zugleich bm-inner – Containerbreite hier neutralisieren */
    body.mw-page-body-modification-berlin
    .bm-jumpbar .bm-jumpbar-inner.bm-inner{
        margin-left:0 !important;
        margin-right:0 !important;
    }

    body.mw-page-body-modification-berlin
    .bm-jumpbar .bm-jumpbar-inner a{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:none !important;

        flex:0 0 auto !important;

        margin:0 !important;
        padding:10px 2px !important;

        overflow:visible !important;
        white-space:normal !important;

        background:transparent !important;

        border:0 !important;
        border-bottom:1px solid rgba(255,255,255,.08) !important;
        border-radius:0 !important;

        color:#b9c4c9 !important;
        -webkit-text-fill-color:#b9c4c9 !important;

        font-size:.72rem !important;
        font-weight:800 !important;
        line-height:1.35 !important;
        text-decoration:none !important;

        transform:none !important;

        transition:
            color .2s ease,
            padding-left .2s ease;
    }

    body.mw-page-body-modification-berlin
    .bm-jumpbar .bm-jumpbar-inner a:last-child{
        border-bottom:0 !important;
    }

    body.mw-page-body-modification-berlin
    .bm-jumpbar .bm-jumpbar-inner a:hover,
    body.mw-page-body-modification-berlin
    .bm-jumpbar .bm-jumpbar-inner a:focus-visible{
        color:#00aeef !important;
        -webkit-text-fill-color:#00aeef !important;

        padding-left:7px !important;

        background:transparent !important;
        transform:none !important;
    }
}


/* =========================================================
   3. SERVICES
   Hell -> mittleres Slate
========================================================= */

body.mw-page-body-modification-berlin
main#seiteninhalt section.bm-services.mw-h-flow{
    --mw-flow-from:#dce1e3;
    --mw-flow-bg:#718089;
    --mw-flow-text:#172129;

    margin-top:-1px !important;

    background:
        linear-gradient(
            180deg,
            #dce1e3 0%,
            #d9dfe1 10%,
            #d3dade 20%,
            #cbd3d7 30%,
            #c1cacf 40%,
            #b5c0c5 50%,
            #a7b3b9 60%,
            #98a5ac 70%,
            #89979e 80%,
            #7d8c94 90%,
            #718089 100%
        ) !important;

    padding-bottom:155px !important;
}


/* Services-Kacheln */
body.mw-page-body-modification-berlin .bm-services article{
    background:
        linear-gradient(
            180deg,
            rgba(228,234,237,.76),
            rgba(214,223,227,.76)
        ) !important;

    border:1px solid rgba(39,63,75,.15) !important;

    box-shadow:
        0 14px 34px rgba(31,48,57,.07) !important;
}

body.mw-page-body-modification-berlin .bm-services article h3{
    color:#223039 !important;
    -webkit-text-fill-color:#223039 !important;
}

body.mw-page-body-modification-berlin .bm-services article p{
    color:#526169 !important;
}

/* Trennlinie in den Kacheln dunkler/bläulich */
body.mw-page-body-modification-berlin .bm-services article hr,
body.mw-page-body-modification-berlin .bm-services article [class*="line"]{
    border-color:rgba(31,76,98,.34) !important;
    background:rgba(31,76,98,.34) !important;
}

/* kleiner Text unter der Trennlinie */
body.mw-page-body-modification-berlin .bm-services article small,
body.mw-page-body-modification-berlin .bm-services article p:last-child{
    color:#41545e !important;
    -webkit-text-fill-color:#41545e !important;
    opacity:1 !important;
}

/* Nummern oben links */
body.mw-page-body-modification-berlin .bm-services article > span:first-child{
    color:#00aeef !important;
    -webkit-text-fill-color:#00aeef !important;
    opacity:1 !important;
}


/* Hinweisbox in Services */
body.mw-page-body-modification-berlin .bm-services [class*="note"],
body.mw-page-body-modification-berlin .bm-services [class*="notice"]{
    color:#31454f !important;
}

body.mw-page-body-modification-berlin .bm-services [class*="note"] strong,
body.mw-page-body-modification-berlin .bm-services [class*="notice"] strong,
body.mw-page-body-modification-berlin .bm-services [class*="note"] h3,
body.mw-page-body-modification-berlin .bm-services [class*="notice"] h3{
    color:#243740 !important;
    -webkit-text-fill-color:#243740 !important;
}

body.mw-page-body-modification-berlin .bm-services [class*="note"] p,
body.mw-page-body-modification-berlin .bm-services [class*="notice"] p{
    color:#4b5e67 !important;
}


/* =========================================================
   4. DEEP
   #718089 -> #33434c
========================================================= */

body.mw-page-body-modification-berlin
main#seiteninhalt section.bm-deep.mw-h-flow{
    --mw-flow-from:#718089;
    --mw-flow-bg:#33434c;
    --mw-flow-text:#edf1f2;

    margin-top:-1px !important;

    background:
        linear-gradient(
            180deg,
            #718089 0%,
            #697981 8%,
            #61717a 16%,
            #596970 25%,
            #516169 34%,
            #495962 43%,
            #42525b 52%,
            #3d4d56 61%,
            #394952 70%,
            #36464f 80%,
            #33434c 100%
        ) !important;

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

body.mw-page-body-modification-berlin .bm-deep h2,
body.mw-page-body-modification-berlin .bm-deep h3{
    color:#f1f4f5 !important;
}

body.mw-page-body-modification-berlin .bm-deep p,
body.mw-page-body-modification-berlin .bm-deep li{
    color:#bdc8cd !important;
}


/* dunkle Panelvariablen */
body.mw-page-body-modification-berlin .bm-deep,
body.mw-page-body-modification-berlin .bm-cta{
    --bm-panel:#1b272e;
    --bm-panel-2:#25343c;
    --bm-line:rgba(255,255,255,.11);
    --bm-muted:#bdc7cc;
    --bm-soft:#e8edef;
}


/* =========================================================
   5. PROCESS
   dunkel -> hell
========================================================= */

body.mw-page-body-modification-berlin
main#seiteninhalt section.bm-process.mw-h-flow{
    --mw-flow-from:#33434c;
    --mw-flow-bg:#d4dade;
    --mw-flow-text:#172129;

    margin-top:-1px !important;

    background:
        linear-gradient(
            180deg,
            #33434c 0%,
            #3d4d56 7%,
            #4b5b64 14%,
            #5c6c74 22%,
            #708088 30%,
            #87959d 39%,
            #9eabb1 48%,
            #b2bdc2 58%,
            #c1cacf 68%,
            #cbd3d7 78%,
            #d1d8dc 89%,
            #d4dade 100%
        ) !important;

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


/* =========================================================
   6. SAFETY
   hell -> mittel
========================================================= */

body.mw-page-body-modification-berlin
main#seiteninhalt section.bm-safety.mw-h-flow{
    --mw-flow-from:#d4dade;
    --mw-flow-bg:#9eabb1;
    --mw-flow-text:#172129;

    margin-top:-1px !important;

    background:
        linear-gradient(
            180deg,
            #d4dade 0%,
            #d1d8dc 18%,
            #cbd3d7 34%,
            #c3ccd0 48%,
            #bac4c9 61%,
            #b0bbc0 73%,
            #a7b3b9 85%,
            #9eabb1 100%
        ) !important;
}


/* =========================================================
   7. FAQ
   mittel -> heller
========================================================= */

body.mw-page-body-modification-berlin
main#seiteninhalt section.bm-faq.mw-h-flow{
    --mw-flow-from:#9eabb1;
    --mw-flow-bg:#c7d0d4;
    --mw-flow-text:#172129;

    margin-top:-1px !important;

    background:
        linear-gradient(
            180deg,
            #9eabb1 0%,
            #a5b1b7 13%,
            #adb8bd 26%,
            #b5c0c5 39%,
            #bbc5ca 52%,
            #c0c9ce 65%,
            #c4cdd1 80%,
            #c7d0d4 100%
        ) !important;

    padding-bottom:145px !important;
}


/* =========================================================
   8. CTA
   hell -> Footer-Dunkel
========================================================= */

body.mw-page-body-modification-berlin
main#seiteninhalt section.bm-cta.mw-h-flow{
    --mw-flow-from:#c7d0d4;
    --mw-flow-bg:#172229;
    --mw-flow-text:#edf1f2;

    margin-top:-1px !important;

    background:
        linear-gradient(
            180deg,
            #c7d0d4 0%,
            #bcc6ca 7%,
            #aeb9be 14%,
            #9eabb1 21%,
            #8d9ba2 28%,
            #7b8991 35%,
            #697981 42%,
            #596970 49%,
            #4b5b64 56%,
            #3e4e57 63%,
            #33434c 70%,
            #2b3942 77%,
            #24323a 84%,
            #1e2b33 91%,
            #1a262d 96%,
            #172229 100%
        ) !important;

    padding-top:175px !important;
    padding-bottom:80px !important;
}

body.mw-page-body-modification-berlin .bm-cta h2,
body.mw-page-body-modification-berlin .bm-cta h3{
    color:#f1f4f5 !important;
}

body.mw-page-body-modification-berlin .bm-cta p{
    color:#bdc8cd !important;
}


/* =========================================================
   9. TABLET / MOBILE
   Sprungnavigation wieder horizontal
========================================================= */

@media (max-width:1180px){

    body.mw-page-body-modification-berlin .bm-jumpbar{
        position:sticky !important;
        top:70px !important;
        z-index:40 !important;

        width:100% !important;
        min-width:0 !important;
        max-width:none !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        margin:0 !important;
        padding:0 !important;

        overflow:visible !important;

        background:rgba(15,23,28,.95) !important;
        border:0 !important;
        border-radius:0 !important;

        box-shadow:none !important;
        backdrop-filter:blur(12px);

        pointer-events:auto;
    }

    body.mw-page-body-modification-berlin .bm-jumpbar .bm-jumpbar-inner{
        position:relative !important;
        top:auto !important;
        left:auto !important;

        width:min(1240px,calc(100% - 30px)) !important;
        min-width:0 !important;
        max-width:none !important;

        height:auto !important;
        max-height:none !important;

        margin:0 auto !important;
        padding:10px 0 !important;

        display:flex !important;
        flex-direction:row !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        gap:7px !important;

        overflow:visible !important;

        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
    }

    body.mw-page-body-modification-berlin
    .bm-jumpbar .bm-jumpbar-inner a{
        display:inline-block !important;

        width:auto !important;
        min-width:0 !important;
        max-width:none !important;

        margin:0 !important;
        padding:7px 10px !important;

        border:1px solid rgba(255,255,255,.10) !important;
        border-radius:999px !important;

        background:transparent !important;

        color:#c3cdd1 !important;
        -webkit-text-fill-color:#c3cdd1 !important;

        white-space:normal !important;
        text-decoration:none !important;
    }

    body.mw-page-body-modification-berlin
    .bm-jumpbar .bm-jumpbar-inner a:hover,
    body.mw-page-body-modification-berlin
    .bm-jumpbar .bm-jumpbar-inner a:focus-visible{
        color:#00aeef !important;
        -webkit-text-fill-color:#00aeef !important;
    }
}


/* =========================================================
   10. MOBILE
========================================================= */

@media (max-width:700px){

    body.mw-page-body-modification-berlin
    main#seiteninhalt section.bm-services.mw-h-flow,
    body.mw-page-body-modification-berlin
    main#seiteninhalt section.bm-deep.mw-h-flow,
    body.mw-page-body-modification-berlin
    main#seiteninhalt section.bm-process.mw-h-flow,
    body.mw-page-body-modification-berlin
    main#seiteninhalt section.bm-cta.mw-h-flow{
        padding-top:110px !important;
        padding-bottom:105px !important;
    }
}
/* Korrekturrunde 1 – nur Leadtext im Prozessbereich */
body.mw-page-body-modification-berlin main#seiteninhalt .bm-process .bm-lead{
    color:#2b3c45!important;
    -webkit-text-fill-color:#2b3c45!important;
    opacity:1!important;
}