/* =========================================================
   MOST WANTED – TATTOO SCHULUNGEN HARMONIC FINAL
========================================================= */


/* =========================================================
   1. INTRO
   Hero -> heller Bereich
========================================================= */

body.mw-page-mostwanted-tattoo-schulungen
main#seiteninhalt section.mw-ps-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;
}

body.mw-page-mostwanted-tattoo-schulungen
main#seiteninhalt section.mw-ps-intro.mw-h-flow::before{
    content:none !important;
    display:none !important;
}


/* Intro links: Text sauber lesbar */
body.mw-page-mostwanted-tattoo-schulungen .mw-ps-intro .mw-ps-copy h2{
    color:#172129 !important;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-intro .mw-ps-copy p,
body.mw-page-mostwanted-tattoo-schulungen .mw-ps-intro .mw-ps-copy .mw-ps-lead{
    color:#56656d !important;
}


/* Faktenbox rechts */
body.mw-page-mostwanted-tattoo-schulungen .mw-ps-facts{
    background:
        linear-gradient(
            180deg,
            #151d22,
            #10171b
        ) !important;

    border-color:rgba(0,174,239,.16) !important;
}


/* große Überschrift */
body.mw-page-mostwanted-tattoo-schulungen .mw-ps-facts h3{
    color:#f0f4f5 !important;
    -webkit-text-fill-color:#f0f4f5 !important;
}


/* kleine Headlines */
body.mw-page-mostwanted-tattoo-schulungen .mw-ps-fact strong{
    color:#edf1f2 !important;
    -webkit-text-fill-color:#edf1f2 !important;
}


/* Untertexte */
body.mw-page-mostwanted-tattoo-schulungen .mw-ps-fact small{
    color:#aab6bc !important;
}


/* =========================================================
   2. GALERIE
   Hell bleiben, gegen Ende bereits abdunkeln
========================================================= */

body.mw-page-mostwanted-tattoo-schulungen
main#seiteninhalt section.mw-ps-gallery.mw-h-flow{
    --mw-flow-from:#dce1e3;
    --mw-flow-bg:#bcc6ca;
    --mw-flow-text:#172129;

    background:
        linear-gradient(
            180deg,
            #dce1e3 0%,
            #d9dfe1 30%,
            #d2d9dc 54%,
            #cbd3d7 70%,
            #c4cdd1 84%,
            #bcc6ca 100%
        ) !important;

    padding-bottom:150px !important;
}

body.mw-page-mostwanted-tattoo-schulungen
main#seiteninhalt section.mw-ps-gallery.mw-h-flow::before{
    content:none !important;
    display:none !important;
}


/* =========================================================
   GALERIEBILDER
   Keine schwarzen eckigen Kästen mehr
========================================================= */

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-gallery-grid figure{
    overflow:visible !important;

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

    background:transparent !important;
    border:0 !important;
    border-radius:50% !important;

    box-shadow:none !important;
}


/* Bild selbst wirklich kreisförmig */
body.mw-page-mostwanted-tattoo-schulungen .mw-ps-gallery-grid figure img{
    display:block;

    width:100%;
    height:auto;
    aspect-ratio:1 / 1;

    object-fit:cover;

    border-radius:50% !important;

    box-shadow:
        0 18px 40px rgba(29,45,54,.18),
        0 5px 14px rgba(29,45,54,.11) !important;

    border:1px solid rgba(31,49,59,.10);
}


/* =========================================================
   3. MODUL 01
   Hell -> Dunkel fließend
========================================================= */

body.mw-page-mostwanted-tattoo-schulungen
main#seiteninhalt section.mw-ps-module-dark.mw-h-flow{
    --mw-flow-from:#bcc6ca;
    --mw-flow-bg:#33434c;
    --mw-flow-text:#edf1f2;

    background:
        linear-gradient(
            180deg,
            #bcc6ca 0%,
            #aeb9be 7%,
            #9eabb1 14%,
            #8b99a1 21%,
            #78868e 29%,
            #66767e 37%,
            #56666f 46%,
            #495962 56%,
            #3e4e57 68%,
            #37474f 82%,
            #33434c 100%
        ) !important;

    padding-top:170px !important;
    padding-bottom:140px !important;
}

body.mw-page-mostwanted-tattoo-schulungen
main#seiteninhalt section.mw-ps-module-dark.mw-h-flow::before{
    content:none !important;
    display:none !important;
}


/* Texte Modul 01 */
body.mw-page-mostwanted-tattoo-schulungen .mw-ps-module-dark h2,
body.mw-page-mostwanted-tattoo-schulungen .mw-ps-module-dark h3{
    color:#f0f4f5 !important;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-module-dark p{
    color:#bdc8cd !important;
}


/* Themenkarten */
body.mw-page-mostwanted-tattoo-schulungen .mw-ps-topic-grid article{
    background:
        linear-gradient(
            180deg,
            rgba(16,23,27,.98),
            rgba(12,18,21,.98)
        ) !important;

    border-color:rgba(255,255,255,.07) !important;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-topic-grid article h3{
    color:#f0f4f5 !important;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-topic-grid article p{
    color:#aeb9be !important;
}


/* =========================================================
   4. MODUL 02
   WICHTIG:
   Dieser Bereich besitzt in der PHP KEIN mw-h-flow.
   Deshalb direkt .mw-ps-module-light ansprechen.
========================================================= */

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-module-light{
    position:relative;

    background:
        linear-gradient(
            180deg,
            #33434c 0%,
            #3e4e57 6%,
            #4d5d66 12%,
            #607079 19%,
            #76858d 27%,
            #8e9ca3 35%,
            #a5b1b7 44%,
            #b8c3c8 54%,
            #c7d0d4 65%,
            #d0d7da 76%,
            #d4dade 88%,
            #d4dade 100%
        ) !important;

    padding-top:180px !important;
    padding-bottom:130px !important;

    color:#172129 !important;
}


/* Text erst im helleren Bereich */
body.mw-page-mostwanted-tattoo-schulungen .mw-ps-module-light h2,
body.mw-page-mostwanted-tattoo-schulungen .mw-ps-module-light h3{
    color:#172129 !important;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-module-light p{
    color:#56656d !important;
}


/* =========================================================
   5. TYPES
   Kein Weißblock mehr
========================================================= */

body.mw-page-mostwanted-tattoo-schulungen
main#seiteninhalt section.mw-ps-types.mw-h-flow{
    --mw-flow-from:#d4dade;
    --mw-flow-bg:#c2ccd1;
    --mw-flow-text:#172129;

    background:
        linear-gradient(
            180deg,
            #d4dade 0%,
            #d1d8dc 24%,
            #cbd3d7 48%,
            #c6cfd3 72%,
            #c2ccd1 100%
        ) !important;

    padding-top:110px !important;
    padding-bottom:140px !important;
}

body.mw-page-mostwanted-tattoo-schulungen
main#seiteninhalt section.mw-ps-types.mw-h-flow::before{
    content:none !important;
    display:none !important;
}


/* Hauptüberschrift */
body.mw-page-mostwanted-tattoo-schulungen .mw-ps-types .mw-ps-heading h2{
    color:#172129 !important;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-types .mw-ps-heading p{
    color:#596870 !important;
}


/* dunkle vier Kacheln */
body.mw-page-mostwanted-tattoo-schulungen .mw-ps-type-grid article{
    background:
        linear-gradient(
            180deg,
            #151d22,
            #10171b
        ) !important;

    border-color:rgba(255,255,255,.07) !important;
}


/* Bild 5: Überschriften endlich hell */
body.mw-page-mostwanted-tattoo-schulungen .mw-ps-type-grid article h3{
    color:#f0f4f5 !important;
    -webkit-text-fill-color:#f0f4f5 !important;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-type-grid article p{
    color:#bdc8cd !important;
}


/* =========================================================
   6. SCHULUNGSDATEN
   Schon innerhalb der Section langsam abdunkeln
========================================================= */

body.mw-page-mostwanted-tattoo-schulungen
main#seiteninhalt section.mw-ps-data.mw-h-flow{
    --mw-flow-from:#c2ccd1;
    --mw-flow-bg:#4b5b64;
    --mw-flow-text:#172129;

    background:
        linear-gradient(
            180deg,
            #c2ccd1 0%,
            #bdc7cc 14%,
            #b5c0c5 28%,
            #a8b4ba 40%,
            #99a6ad 52%,
            #87959d 63%,
            #74838b 74%,
            #62717a 84%,
            #56666f 92%,
            #4b5b64 100%
        ) !important;

    padding-top:120px !important;
    padding-bottom:150px !important;
}

body.mw-page-mostwanted-tattoo-schulungen
main#seiteninhalt section.mw-ps-data.mw-h-flow::before{
    content:none !important;
    display:none !important;
}


/* Headline oben auf noch hellem Hintergrund */
body.mw-page-mostwanted-tattoo-schulungen .mw-ps-data .mw-ps-heading h2{
    color:#172129 !important;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-data .mw-ps-heading p{
    color:#53626a !important;
}


/* =========================================================
   DATENKACHELN
========================================================= */

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-detail{
    background:
        linear-gradient(
            180deg,
            rgba(18,26,31,.98),
            rgba(13,20,24,.98)
        ) !important;

    border:1px solid rgba(255,255,255,.08) !important;
    color:#edf1f2 !important;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-detail span{
    color:#00aeef !important;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-detail strong{
    color:#f0f4f5 !important;
    -webkit-text-fill-color:#f0f4f5 !important;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-detail small{
    color:#aeb9be !important;
}


/* =========================================================
   PREISKACHEL
   Wieder wertig statt kaputt / ausgewaschen
========================================================= */

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-detail-price{
    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(0,174,239,.10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #17262d,
            #111a1f
        ) !important;

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

    box-shadow:
        0 16px 38px rgba(20,34,42,.16) !important;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-detail-price span{
    color:#00aeef !important;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-detail-price strong{
    color:#f4f7f8 !important;
    font-size:1.25em;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-detail-price small{
    color:#bdc8cd !important;
}


/* =========================================================
   KONTAKTBOX
========================================================= */

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-calendar{
    background:
        linear-gradient(
            180deg,
            rgba(18,27,32,.98),
            rgba(13,20,24,.98)
        ) !important;

    border-color:rgba(0,174,239,.16) !important;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-calendar h3{
    color:#f0f4f5 !important;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-calendar p{
    color:#b7c2c7 !important;
}


/* =========================================================
   7. CTA
   Datenbereich -> Footer-Dunkel ohne Cut
========================================================= */

body.mw-page-mostwanted-tattoo-schulungen
main#seiteninhalt section.mw-ps-cta.mw-h-flow{
    --mw-flow-from:#4b5b64;
    --mw-flow-bg:#172229;
    --mw-flow-text:#edf1f2;

    background:
        linear-gradient(
            180deg,
            #4b5b64 0%,
            #43535c 8%,
            #3a4a53 16%,
            #33434c 25%,
            #2d3c45 34%,
            #27363e 44%,
            #223039 55%,
            #1e2b33 67%,
            #1b2830 78%,
            #19252c 89%,
            #172229 100%
        ) !important;

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

body.mw-page-mostwanted-tattoo-schulungen
main#seiteninhalt section.mw-ps-cta.mw-h-flow::before{
    content:none !important;
    display:none !important;
}


/* CTA Box */
body.mw-page-mostwanted-tattoo-schulungen .mw-ps-cta-box{
    background:
        linear-gradient(
            180deg,
            rgba(16,24,28,.98),
            rgba(12,19,22,.98)
        ) !important;

    border-color:rgba(0,174,239,.18) !important;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-cta-box h2{
    color:#f1f4f5 !important;
}

body.mw-page-mostwanted-tattoo-schulungen .mw-ps-cta-box p{
    color:#b8c3c8 !important;
}


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

@media(max-width:700px){

    body.mw-page-mostwanted-tattoo-schulungen
    main#seiteninhalt section.mw-ps-gallery.mw-h-flow{
        padding-bottom:105px !important;
    }

    body.mw-page-mostwanted-tattoo-schulungen
    main#seiteninhalt section.mw-ps-module-dark.mw-h-flow{
        padding-top:120px !important;
        padding-bottom:105px !important;
    }

    body.mw-page-mostwanted-tattoo-schulungen .mw-ps-module-light{
        padding-top:125px !important;
        padding-bottom:100px !important;
    }

    body.mw-page-mostwanted-tattoo-schulungen
    main#seiteninhalt section.mw-ps-types.mw-h-flow{
        padding-top:90px !important;
        padding-bottom:105px !important;
    }

    body.mw-page-mostwanted-tattoo-schulungen
    main#seiteninhalt section.mw-ps-data.mw-h-flow{
        padding-top:95px !important;
        padding-bottom:115px !important;
    }

    body.mw-page-mostwanted-tattoo-schulungen
    main#seiteninhalt section.mw-ps-cta.mw-h-flow{
        padding-top:115px !important;
        padding-bottom:70px !important;
    }

/* =====================================================
   MOBILE · TATTOO-SCHULUNG – TEXTE DUNKLER
===================================================== */

/* 01 · Ausbildungsinhalte */
body.mw-page-mostwanted-tattoo-schulungen
.mw-ps-module-dark .mw-ps-module-title > p{
    color:#101a1f !important;
    -webkit-text-fill-color:#101a1f !important;
    opacity:1 !important;
}

/* 02 · Praxis */
body.mw-page-mostwanted-tattoo-schulungen
.mw-ps-module-light .mw-ps-module-title > p{
    color:#101a1f !important;
    -webkit-text-fill-color:#101a1f !important;
    opacity:1 !important;
}
    /* =====================================================
       MOBILE · MODUL 01 LESBARKEIT
       Tattoo-Schulung
       Nur Überschrift + Einleitung, Karten bleiben unberührt
    ===================================================== */

    body.mw-page-mostwanted-tattoo-schulungen
    .mw-ps-module-dark .mw-ps-module-title h2{
        color:#172129 !important;
        -webkit-text-fill-color:#172129 !important;
    }

    body.mw-page-mostwanted-tattoo-schulungen
    .mw-ps-module-dark .mw-ps-module-title > p{
        color:#52636d !important;
        -webkit-text-fill-color:#52636d !important;
        opacity:1 !important;
    }
}