/* =========================================================
   HARMONIC PAGE FLOW
   preise.php
   CLEAN FINAL
========================================================= */


/* =========================================================
   BASIS
   Alte Core-Übergänge deaktivieren,
   damit keine horizontalen Kanten entstehen
========================================================= */

body.mw-page-preise
main#seiteninhalt section.mw-price-intro.mw-h-flow::before,

body.mw-page-preise
main#seiteninhalt section.mw-price-highlights.mw-h-flow::before,

body.mw-page-preise
main#seiteninhalt section.mw-price-list-section.mw-h-flow::before,

body.mw-page-preise
main#seiteninhalt section.mw-price-tattoo.mw-h-flow::before,

body.mw-page-preise
main#seiteninhalt section.mw-price-service.mw-h-flow::before{
    content:none !important;
    display:none !important;
}


/* =========================================================
   PREIS-SEITE – GRUNDVARIABLEN
========================================================= */

body.mw-page-preise .mw-price-page{
    --price-blue:#00aeef;

    --price-line:rgba(30,48,58,.14);
    --price-muted:#53636c;
    --price-soft:#344851;

    background:#172229 !important;
}


/* =========================================================
   01 · INTRO
   HERO DUNKEL -> LANGSAM HELL

   Start deutlich dunkel.
   Erst im unteren Bereich wird wirklich hell.
========================================================= */

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

    position:relative;

    margin:0 !important;

    background:
        linear-gradient(
            180deg,

            #172229 0%,
            #1d2a32 6%,
            #26363e 13%,
            #34454e 21%,
            #465760 30%,
            #5d6d76 39%,
            #75848c 48%,
            #8f9ca3 57%,
            #a8b4ba 66%,
            #bdc7cc 75%,
            #ced6da 85%,
            #d8dee1 93%,
            #dce1e3 100%
        ) !important;

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

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


/* =========================================================
   01 · INTRO
   HERO DUNKEL -> HELL

   Oben bleibt der gewünschte dunkle Einstieg.
   Der eigentliche Inhalt sitzt aber bereits auf
   deutlich hellerem Hintergrund.
========================================================= */

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

    position:relative;

    margin:0 !important;

    background:
        linear-gradient(
            180deg,

            /* direkt unter dem Hero dunkel */
            #172229 0%,
            #1d2a32 5%,
            #26363e 10%,
            #35464f 15%,

            /* Übergang beginnt deutlich früher */
            #50616a 20%,
            #6b7a82 25%,
            #87959c 30%,
            #a0adb3 35%,

            /* ab hier bereits gut lesbarer heller Bereich */
            #b5c0c5 40%,
            #c5ced2 46%,
            #d0d7da 52%,
            #d7dde0 60%,
            #dce1e3 70%,
            #dce1e3 100%
        ) !important;

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

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


/* =========================================================
   INTRO – HEADLINE
========================================================= */

body.mw-page-preise
section.mw-price-intro .mw-price-title{
    color:#172129 !important;
    -webkit-text-fill-color:#172129 !important;
}


/* =========================================================
   INTRO – FLIESSTEXT
========================================================= */

body.mw-page-preise
section.mw-price-intro .mw-price-intro-copy p{
    color:#40545e !important;
    -webkit-text-fill-color:#40545e !important;
    opacity:1 !important;
}


body.mw-page-preise
section.mw-price-intro .mw-price-lead{
    color:#314750 !important;
    -webkit-text-fill-color:#314750 !important;
    opacity:1 !important;
}


/* Hervorgehobener Text im Fließtext */

body.mw-page-preise
section.mw-price-intro .mw-price-intro-copy strong{
    color:#172129 !important;
    -webkit-text-fill-color:#172129 !important;
}


/* =========================================================
   RECHTE HINWEISBOX
   bleibt bewusst dunkel
========================================================= */

body.mw-page-preise
section.mw-price-intro .mw-price-note{
    --price-panel:#11191d;

    background:
        linear-gradient(
            145deg,
            rgba(0,174,239,.08),
            transparent 44%
        ),
        #11191d !important;

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

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


body.mw-page-preise
section.mw-price-intro .mw-price-note strong{
    color:#f2f5f6 !important;
    -webkit-text-fill-color:#f2f5f6 !important;
}


body.mw-page-preise
section.mw-price-intro .mw-price-note p{
    color:#bdc7cc !important;
    -webkit-text-fill-color:#bdc7cc !important;
    opacity:1 !important;
}


/* =========================================================
   02 · HIGHLIGHTS
   HELL -> WIEDER DUNKLER

   Hier beginnt bereits die nächste Welle.
========================================================= */

body.mw-page-preise
main#seiteninhalt
section.mw-price-highlights.mw-h-flow{
    --mw-flow-from:#dce1e3;
    --mw-flow-bg:#819097;
    --mw-flow-text:#172129;

    margin-top:-1px !important;

    background:
        linear-gradient(
            180deg,

            #dce1e3 0%,
            #d8dee1 12%,
            #d0d7da 24%,
            #c3ccd0 37%,
            #b2bdc2 50%,
            #a1adb3 63%,
            #909da4 76%,
            #819097 88%,
            #718089 100%
        ) !important;

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

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


/* Highlights bleiben dunkle Karten */

body.mw-page-preise
section.mw-price-highlights .mw-price-highlight{
    background:#11191d !important;

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

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


body.mw-page-preise
section.mw-price-highlights .mw-price-highlight strong{
    color:#f2f5f6 !important;
    -webkit-text-fill-color:#f2f5f6 !important;
}


/* =========================================================
   03 · PIERCING-PREISLISTE
   DUNKLER -> WIEDER HELL

   Damit verschwindet die kilometerlange helle Fläche.
========================================================= */

body.mw-page-preise
main#seiteninhalt
section.mw-price-list-section.mw-h-flow{
    --mw-flow-from:#718089;
    --mw-flow-bg:#d4dade;
    --mw-flow-text:#172129;

    position:relative;

    margin-top:-1px !important;

    background:
        linear-gradient(
            180deg,

            /* oben deutlich dunkler */
            #718089 0%,
            #79888f 7%,
            #849299 14%,
            #919ea5 22%,
            #9eabb1 30%,

            /* Richtung mittel */
            #abb6bb 39%,
            #b7c1c6 48%,
            #c2cbcf 57%,

            /* heller Mittelbereich */
            #cbd3d7 66%,
            #d2d9dc 75%,
            #d7dde0 84%,
            #dce1e3 93%,
            #dce1e3 100%
        ) !important;

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

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


/* =========================================================
   PREISLISTE – HEADLINE / BESCHREIBUNG
========================================================= */

body.mw-page-preise
section.mw-price-list-section .mw-price-title{
    color:#172129 !important;
    -webkit-text-fill-color:#172129 !important;
}


body.mw-page-preise
section.mw-price-list-section .mw-price-list-head p{
    color:#435761 !important;
    -webkit-text-fill-color:#435761 !important;
    opacity:1 !important;
}


/* =========================================================
   PREISKARTEN

   WICHTIG:
   unabhängig vom hellen Hintergrund IMMER dunkel.
========================================================= */

body.mw-page-preise
section.mw-price-list-section .mw-price-card{
    --price-panel:#11191d;
    --price-panel-2:#172229;
    --price-line:rgba(255,255,255,.10);

    background:#11191d !important;

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

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


/* Kartenkopf */

body.mw-page-preise
section.mw-price-list-section .mw-price-card-head{
    background:
        linear-gradient(
            110deg,
            rgba(0,174,239,.10),
            transparent 52%
        ),
        #172229 !important;

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


body.mw-page-preise
section.mw-price-list-section .mw-price-card-head h3{
    color:#f4f6f7 !important;
    -webkit-text-fill-color:#f4f6f7 !important;
}


body.mw-page-preise
section.mw-price-list-section .mw-price-card-head span{
    color:#9caab1 !important;
    -webkit-text-fill-color:#9caab1 !important;
}


/* =========================================================
   TABELLEN – LESBARKEIT
========================================================= */

body.mw-page-preise
section.mw-price-list-section .mw-price-table{
    color:#d7dfe2 !important;
}


/* Zeilentrenner */

body.mw-page-preise
section.mw-price-list-section .mw-price-table tr{
    border-bottom-color:rgba(255,255,255,.09) !important;
}


/* Piercing / Leistung */

body.mw-page-preise
section.mw-price-list-section .mw-price-table td:first-child{
    color:#d3dce0 !important;
    -webkit-text-fill-color:#d3dce0 !important;
    opacity:1 !important;
}


/* Preis */

body.mw-page-preise
section.mw-price-list-section .mw-price-table td:last-child{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    opacity:1 !important;
}


/* generell alle TD absichern */

body.mw-page-preise
section.mw-price-list-section .mw-price-table td{
    opacity:1 !important;
}


/* =========================================================
   HINWEIS UNTER PREISLISTE
========================================================= */

body.mw-page-preise
section.mw-price-list-section .mw-price-bottom-note{
    background:rgba(23,34,41,.08) !important;

    border-left-color:#00aeef !important;
}


body.mw-page-preise
section.mw-price-list-section .mw-price-bottom-note p{
    color:#354a54 !important;
    -webkit-text-fill-color:#354a54 !important;
}


/* =========================================================
   04 · TATTOO-PREISE
   HELL -> WIEDER DUNKLER

   Zweite große Abdunklung.
========================================================= */

body.mw-page-preise
main#seiteninhalt
section.mw-price-tattoo.mw-h-flow{
    --mw-flow-from:#dce1e3;
    --mw-flow-bg:#33434c;
    --mw-flow-text:#edf1f2;

    margin-top:-1px !important;

    background:
        linear-gradient(
            180deg,

            #dce1e3 0%,
            #d8dee1 8%,
            #cfd6da 16%,
            #c2cbcf 25%,
            #b3bec3 34%,
            #a1adb3 43%,
            #8f9ca3 52%,
            #7b8a92 61%,
            #687880 70%,
            #55666f 79%,
            #45565f 88%,
            #394a53 95%,
            #33434c 100%
        ) !important;

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

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


/* Tattoo-Box bleibt tief dunkel */

body.mw-page-preise
section.mw-price-tattoo .mw-price-tattoo-box{
    --price-panel:#11191d;
    --price-panel-2:#172229;
    --price-line:rgba(255,255,255,.10);
    --price-soft:#d0d9dd;

    background:
        linear-gradient(
            145deg,
            rgba(0,174,239,.06),
            transparent 38%
        ),
        #11191d !important;

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

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


body.mw-page-preise
section.mw-price-tattoo .mw-price-tattoo-box h2{
    color:#f4f6f7 !important;
    -webkit-text-fill-color:#f4f6f7 !important;
}


body.mw-page-preise
section.mw-price-tattoo .mw-price-tattoo-box p{
    color:#c4ced2 !important;
    -webkit-text-fill-color:#c4ced2 !important;
}


/* Faktoren rechts */

body.mw-page-preise
section.mw-price-tattoo .mw-price-tattoo-fact{
    background:#0d1317 !important;

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


body.mw-page-preise
section.mw-price-tattoo .mw-price-tattoo-fact strong{
    color:#f3f5f6 !important;
    -webkit-text-fill-color:#f3f5f6 !important;
}


/* =========================================================
   05 · SERVICE
   DUNKLER -> GANZ DUNKEL -> FOOTER
========================================================= */

body.mw-page-preise
main#seiteninhalt
section.mw-price-service.mw-h-flow{
    --mw-flow-from:#33434c;
    --mw-flow-bg:#172229;
    --mw-flow-text:#edf1f2;

    margin-top:-1px !important;

    background:
        linear-gradient(
            180deg,

            #33434c 0%,
            #304049 10%,
            #2c3c44 20%,
            #293840 31%,
            #25343c 43%,
            #223039 55%,
            #1e2c34 68%,
            #1b2830 80%,
            #18242b 90%,
            #172229 100%
        ) !important;

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

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


/* Service Headline */

body.mw-page-preise
section.mw-price-service .mw-price-title{
    color:#f4f6f7 !important;
    -webkit-text-fill-color:#f4f6f7 !important;
}


body.mw-page-preise
section.mw-price-service .mw-price-lead{
    color:#bdc7cc !important;
    -webkit-text-fill-color:#bdc7cc !important;
}


/* Servicekarten */

body.mw-page-preise
section.mw-price-service .mw-price-service-card{
    --price-panel:#11191d;

    background:#11191d !important;

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


body.mw-page-preise
section.mw-price-service .mw-price-service-card h3{
    color:#f2f5f6 !important;
    -webkit-text-fill-color:#f2f5f6 !important;
}


body.mw-page-preise
section.mw-price-service .mw-price-service-card p{
    color:#bdc7cc !important;
    -webkit-text-fill-color:#bdc7cc !important;
}


/* =========================================================
   LETZTER ÜBERGANG ZUM FOOTER

   Service ist am Ende bereits exakt Footer-Dunkel.
========================================================= */

body.mw-page-preise
main#seiteninhalt
section.mw-price-service.mw-h-flow::after{
    content:none !important;
    display:none !important;
}

/* =========================================================
   MOBILE · FINAL
   Ausschließlich bis 700px – Desktop bleibt unverändert
========================================================= */

@media(max-width:700px){

    body.mw-page-preise main#seiteninhalt section.mw-price-intro.mw-h-flow{
        background:linear-gradient(180deg,#26363e 0%,#304149 12%,#3c4e57 25%,#4a5c65 38%,#5c6e77 52%,#718089 64%,#89979e 74%,#a2afb5 83%,#bbc5ca 91%,#dce1e3 100%) !important;
        padding-top:110px !important;
        padding-bottom:115px !important;
    }

    body.mw-page-preise section.mw-price-intro .mw-price-title{
        color:#f4f7f8 !important;
        -webkit-text-fill-color:#f4f7f8 !important;
    }

    body.mw-page-preise section.mw-price-intro .mw-price-lead,
    body.mw-page-preise section.mw-price-intro .mw-price-intro-copy p{
        color:#d9e1e4 !important;
        -webkit-text-fill-color:#d9e1e4 !important;
        opacity:1 !important;
    }

    body.mw-page-preise section.mw-price-intro .mw-price-intro-copy strong{
        color:#fff !important;
        -webkit-text-fill-color:#fff !important;
    }

    body.mw-page-preise main#seiteninhalt section.mw-price-highlights.mw-h-flow{padding-bottom:95px !important;}

    body.mw-page-preise main#seiteninhalt section.mw-price-list-section.mw-h-flow{
        padding-top:100px !important;
        padding-bottom:115px !important;
    }

    body.mw-page-preise section.mw-price-list-section .mw-price-title{
        color:#f4f7f8 !important;
        -webkit-text-fill-color:#f4f7f8 !important;
    }

    body.mw-page-preise section.mw-price-list-section .mw-price-list-head p{
        color:#d7e0e4 !important;
        -webkit-text-fill-color:#d7e0e4 !important;
        opacity:1 !important;
    }

    body.mw-page-preise section.mw-price-list-section .mw-price-table td:first-child{color:#d3dce0 !important;}
    body.mw-page-preise section.mw-price-list-section .mw-price-table td:last-child{color:#fff !important;}

    body.mw-page-preise main#seiteninhalt section.mw-price-tattoo.mw-h-flow{
        padding-top:110px !important;
        padding-bottom:110px !important;
    }

    body.mw-page-preise main#seiteninhalt section.mw-price-service.mw-h-flow{
        padding-top:105px !important;
        padding-bottom:115px !important;
    }
}
/* Korrekturrunde 1 – nur Erklärungstext der Piercing-Preisliste */
body.mw-page-preise main#seiteninhalt .mw-price-list-section .mw-price-list-head > p{
    color:#263943!important;
    -webkit-text-fill-color:#263943!important;
    opacity:1!important;
}

/* =========================================================
   PREISE – gezielte Farbkorrektur 2026-09-07
   Exakte Klassen aus preise.php, Desktop + Mobil
========================================================= */

/* Dunkle Hinweis-Kachel: Headline weiss */
body.mw-page-preise section.mw-price-intro .mw-price-note > strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Vier dunkle Highlight-Kacheln: Headlines weiss */
body.mw-page-preise section.mw-price-highlights .mw-price-highlight > strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Piercing-Preiskarten inkl. Full-Width-Karten: Headlines weiss */
body.mw-page-preise section.mw-price-list-section .mw-price-card .mw-price-card-head > h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Erklaertext rechts ueber der Preisliste: wirklich schwarz */
body.mw-page-preise section.mw-price-list-section .mw-price-list-head > p {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
}