/* =========================================================
   MOST WANTED – PIERCING SCHULUNGEN
   HARMONIC CLEAN FINAL
========================================================= */


/* =========================================================
   BASIS
   Diese Datei steuert sämtliche Übergänge der Seite.
========================================================= */

body.mw-page-piercing-schulungen
main#seiteninhalt > section{
    position:relative;
    margin-top:-1px !important;
    border:0 !important;
    outline:0 !important;
    background-clip:border-box;
}


/* Core-Pseudoverläufe ausschalten.
   Sonst entstehen zusätzliche horizontale Kanten. */

body.mw-page-piercing-schulungen
main#seiteninhalt > section.mw-h-flow::before,

body.mw-page-piercing-schulungen
main#seiteninhalt > section.mw-h-flow::after{
    content:none !important;
    display:none !important;
}


/* =========================================================
   1 · INTRO
   Hero dunkel -> langsam heller
========================================================= */

body.mw-page-piercing-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,

            /* direkt nach Hero bewusst dunkel */
            #26353d 0%,
            #304049 6%,
            #3d4d56 12%,
            #4d5d66 19%,

            /* mittlere Zone */
            #607079 27%,
            #75848d 35%,
            #8b99a1 43%,

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

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


/* Introtexte */

body.mw-page-piercing-schulungen
.mw-ps-intro .mw-ps-copy h2{
    color:#172129 !important;
    -webkit-text-fill-color:#172129 !important;
}

body.mw-page-piercing-schulungen
.mw-ps-intro .mw-ps-copy p,
body.mw-page-piercing-schulungen
.mw-ps-intro .mw-ps-copy .mw-ps-lead{
    color:#4d6069 !important;
    -webkit-text-fill-color:#4d6069 !important;
    opacity:1 !important;
}


/* ---------------------------------------------------------
   Faktenbox rechts
--------------------------------------------------------- */

body.mw-page-piercing-schulungen
.mw-ps-facts{
    background:
        linear-gradient(
            180deg,
            #151d22,
            #10171b
        ) !important;

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

    box-shadow:
        0 20px 46px rgba(23,34,41,.18);
}

body.mw-page-piercing-schulungen
.mw-ps-facts h3{
    color:#f3f6f7 !important;
    -webkit-text-fill-color:#f3f6f7 !important;
}

body.mw-page-piercing-schulungen
.mw-ps-fact strong{
    color:#f0f4f5 !important;
    -webkit-text-fill-color:#f0f4f5 !important;
    opacity:1 !important;
}

body.mw-page-piercing-schulungen
.mw-ps-fact small{
    color:#b7c2c7 !important;
    -webkit-text-fill-color:#b7c2c7 !important;
    opacity:1 !important;
}

body.mw-page-piercing-schulungen
.mw-ps-fact > span{
    color:#00aeef !important;
    -webkit-text-fill-color:#00aeef !important;
}


/* =========================================================
   2 · GALERIE
   Hell -> etwas dunkler
========================================================= */

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

    background:
        linear-gradient(
            180deg,
            #dce1e3 0%,
            #dbe0e2 12%,
            #d5dcdf 24%,
            #ccd4d8 38%,
            #c2cbcf 52%,
            #bac4c9 66%,
            #b3bec3 80%,
            #aeb9be 92%,
            #a8b4ba 100%
        ) !important;

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


body.mw-page-piercing-schulungen
.mw-ps-gallery .mw-ps-heading h2{
    color:#172129 !important;
}

body.mw-page-piercing-schulungen
.mw-ps-gallery .mw-ps-heading p{
    color:#50616a !important;
}


/* Bilder ohne schwarze Kästen */

body.mw-page-piercing-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;
}

body.mw-page-piercing-schulungen
.mw-ps-gallery-grid figure img{
    display:block;

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

    object-fit:cover;

    border-radius:50% !important;

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

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


/* =========================================================
   3 · SCHULUNGSINHALTE TEIL 1
   Mittelhell -> dunkel
========================================================= */

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

    background:
        linear-gradient(
            180deg,

            #a8b4ba 0%,
            #9daab0 7%,
            #909da4 14%,
            #819097 21%,
            #718089 29%,
            #62717a 37%,
            #55656e 46%,
            #495962 56%,
            #405059 67%,
            #394951 78%,
            #35464e 89%,
            #33434c 100%
        ) !important;

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


/* WICHTIG:
   helle Texte NUR im dunklen Modul */

body.mw-page-piercing-schulungen
.mw-ps-module-dark h2,
body.mw-page-piercing-schulungen
.mw-ps-module-dark h3{
    color:#f2f5f6 !important;
    -webkit-text-fill-color:#f2f5f6 !important;
}

body.mw-page-piercing-schulungen
.mw-ps-module-dark p{
    color:#bdc8cd !important;
    -webkit-text-fill-color:#bdc8cd !important;
}


/* Themenkarten */

body.mw-page-piercing-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-piercing-schulungen
.mw-ps-topic-grid article h3{
    color:#f2f5f6 !important;
    -webkit-text-fill-color:#f2f5f6 !important;
}

body.mw-page-piercing-schulungen
.mw-ps-topic-grid article p{
    color:#b7c2c7 !important;
    -webkit-text-fill-color:#b7c2c7 !important;
}


/* =========================================================
   4 · SCHULUNGSINHALTE TEIL 2
   DER BISHERIGE FEHLER

   Dieser Abschnitt besitzt in der PHP KEIN mw-h-flow.
   Deshalb direkt über .mw-ps-module-light steuern.
========================================================= */

body.mw-page-piercing-schulungen
main#seiteninhalt
section.mw-ps-module-light{
    position:relative;

    background:
        linear-gradient(
            180deg,

            /* exakt dort starten, wo Modul 01 endet */
            #33434c 0%,
            #3d4d56 6%,
            #4c5c65 12%,
            #5d6d76 18%,
            #718089 24%,
            #87959c 30%,
            #9da9af 36%,
            #b0bbc0 43%,
            #c0c9ce 50%,
            #cdd5d9 58%,
            #d6dcdf 67%,
            #dce1e3 78%,
            #dce1e3 100%
        ) !important;

    padding-top:190px !important;
    padding-bottom:155px !important;

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

    color:#172129 !important;
}


/* Nummer 02 darf hellblau bleiben */

body.mw-page-piercing-schulungen
.mw-ps-module-light .mw-ps-number{
    color:rgba(0,174,239,.18) !important;
    -webkit-text-fill-color:rgba(0,174,239,.18) !important;
}


/* Jetzt bewusst DUNKLE Schrift auf dem hellen Bereich */

body.mw-page-piercing-schulungen
.mw-ps-module-light h2{
    color:#172129 !important;
    -webkit-text-fill-color:#172129 !important;
    opacity:1 !important;
}

body.mw-page-piercing-schulungen
.mw-ps-module-light .mw-ps-module-title > p{
    color:#50616a !important;
    -webkit-text-fill-color:#50616a !important;
    opacity:1 !important;
}


/* rechte Praxispunkte */

body.mw-page-piercing-schulungen
.mw-ps-module-light .mw-ps-practice h3{
    color:#243740 !important;
    -webkit-text-fill-color:#243740 !important;
    opacity:1 !important;
}

body.mw-page-piercing-schulungen
.mw-ps-module-light .mw-ps-practice p{
    color:#566871 !important;
    -webkit-text-fill-color:#566871 !important;
    opacity:1 !important;
}


/* Trennlinien etwas kräftiger */

body.mw-page-piercing-schulungen
.mw-ps-module-light .mw-ps-practice > div{
    border-color:rgba(31,49,59,.16) !important;
}


/* =========================================================
   5 · PIERCINGVARIANTEN
   Hell -> leichte Welle -> wieder mittel
========================================================= */

body.mw-page-piercing-schulungen
main#seiteninhalt
section.mw-ps-types.mw-h-flow{
    --mw-flow-from:#dce1e3;
    --mw-flow-bg:#b4bfc4;
    --mw-flow-text:#172129;

    background:
        linear-gradient(
            180deg,

            #dce1e3 0%,
            #d8dee1 10%,
            #d1d8dc 20%,
            #c7d0d4 31%,
            #bac4c9 42%,
            #adb8bd 53%,

            /* wieder etwas heller */
            #b8c2c7 64%,
            #c3ccd0 74%,
            #cbd3d7 83%,

            /* zum nächsten Abschnitt wieder leicht dunkler */
            #c2cbcf 91%,
            #b5c0c5 100%
        ) !important;

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


body.mw-page-piercing-schulungen
.mw-ps-types .mw-ps-heading h2{
    color:#172129 !important;
    -webkit-text-fill-color:#172129 !important;
}

body.mw-page-piercing-schulungen
.mw-ps-types .mw-ps-heading p{
    color:#53656e !important;
    -webkit-text-fill-color:#53656e !important;
}


/* dunkle Piercingkarten */

body.mw-page-piercing-schulungen
.mw-ps-type-grid article{
    background:
        linear-gradient(
            180deg,
            #151d22,
            #10171b
        ) !important;

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

    box-shadow:
        0 15px 34px rgba(23,34,41,.12);
}

body.mw-page-piercing-schulungen
.mw-ps-type-grid article h3{
    color:#f2f5f6 !important;
    -webkit-text-fill-color:#f2f5f6 !important;
}

body.mw-page-piercing-schulungen
.mw-ps-type-grid article p{
    color:#bdc8cd !important;
    -webkit-text-fill-color:#bdc8cd !important;
}

body.mw-page-piercing-schulungen
.mw-ps-type-grid article > span{
    color:#00aeef !important;
}


/* =========================================================
   6 · SCHULUNGSDATEN
   Mittelhell -> dunkel
========================================================= */

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

    background:
        linear-gradient(
            180deg,

            #b5c0c5 0%,
            #adb8bd 9%,
            #a2aeb4 18%,
            #95a2a9 27%,
            #87959c 36%,
            #79888f 45%,
            #6c7b83 54%,
            #607079 63%,
            #586870 72%,
            #52626b 82%,
            #4e5e67 91%,
            #4b5b64 100%
        ) !important;

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


/* Heading liegt oben noch im helleren Bereich */

body.mw-page-piercing-schulungen
.mw-ps-data .mw-ps-heading h2{
    color:#172129 !important;
    -webkit-text-fill-color:#172129 !important;
}

body.mw-page-piercing-schulungen
.mw-ps-data .mw-ps-heading p{
    color:#475b64 !important;
    -webkit-text-fill-color:#475b64 !important;
}


/* Datenkacheln */

body.mw-page-piercing-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-piercing-schulungen
.mw-ps-detail span{
    color:#00aeef !important;
}

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

body.mw-page-piercing-schulungen
.mw-ps-detail small{
    color:#b7c2c7 !important;
    -webkit-text-fill-color:#b7c2c7 !important;
}


/* Preiskachel */

body.mw-page-piercing-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-piercing-schulungen
.mw-ps-detail-price strong{
    color:#f4f7f8 !important;
    -webkit-text-fill-color:#f4f7f8 !important;
    font-size:1.25em;
}


/* Kalenderbox */

body.mw-page-piercing-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,.18) !important;
}

body.mw-page-piercing-schulungen
.mw-ps-calendar h3,
body.mw-page-piercing-schulungen
.mw-ps-calendar .mw-ps-date strong{
    color:#f2f5f6 !important;
    -webkit-text-fill-color:#f2f5f6 !important;
}

body.mw-page-piercing-schulungen
.mw-ps-calendar .mw-ps-date span{
    color:#aebbc1 !important;
}


/* =========================================================
   7 · CTA -> FOOTER
   Dunkel -> Footerdunkel
========================================================= */

body.mw-page-piercing-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%,
            #45555e 8%,
            #3e4e57 16%,
            #37474f 24%,
            #304049 33%,
            #2a3941 42%,
            #25343c 52%,
            #213039 62%,
            #1e2b33 72%,
            #1b282f 82%,
            #19252c 91%,
            #172229 100%
        ) !important;

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


body.mw-page-piercing-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-piercing-schulungen
.mw-ps-cta-box h2{
    color:#f2f5f6 !important;
    -webkit-text-fill-color:#f2f5f6 !important;
}

body.mw-page-piercing-schulungen
.mw-ps-cta-box p{
    color:#b8c3c8 !important;
    -webkit-text-fill-color:#b8c3c8 !important;
}


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

@media(max-width:700px){

    body.mw-page-piercing-schulungen
    main#seiteninhalt
    section.mw-ps-intro.mw-h-flow{
        padding-top:110px !important;
        padding-bottom:105px !important;
    }

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

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

    body.mw-page-piercing-schulungen
    main#seiteninhalt
    section.mw-ps-module-light{
        padding-top:130px !important;
        padding-bottom:110px !important;
    }

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

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

    body.mw-page-piercing-schulungen
    main#seiteninhalt
    section.mw-ps-cta.mw-h-flow{
        padding-top:115px !important;
        padding-bottom:70px !important;
    }
    /* =====================================================
       MOBILE · INTRO-LESBARKEIT
       piercing-schulung-berlin.php
       Bleibt bewusst innerhalb des @media-Blocks.
    ===================================================== */

body.mw-page-piercing-schulungen
.mw-ps-intro .mw-ps-copy h2{
    color:#172129 !important;
    -webkit-text-fill-color:#172129 !important;
}

body.mw-page-piercing-schulungen
.mw-ps-intro .mw-ps-copy p,
body.mw-page-piercing-schulungen
.mw-ps-intro .mw-ps-copy .mw-ps-lead{
    color:#101a1f !important;
    -webkit-text-fill-color:#101a1f !important;
    opacity:1 !important;
}


    /* =====================================================
       MOBILE · SCHULUNGSINHALTE TEIL 1
       Auf dem mobilen helleren Verlauf dunkle Schrift
    ===================================================== */

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

    body.mw-page-piercing-schulungen
    .mw-ps-module-dark .mw-ps-module-title > p{
        color:#4f6069 !important;
        -webkit-text-fill-color:#4f6069 !important;
        opacity:1 !important;
    }

}

/* =====================================================
   MOBILE · SCHULUNGSINHALTE TEIL 2 – KONTRAST
===================================================== */

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

body.mw-page-piercing-schulungen
.mw-ps-module-light .mw-ps-module-title > p{
    color:#263943 !important;
    -webkit-text-fill-color:#263943 !important;
    opacity:1 !important;
}