/* =========================================================
   MOST WANTED – TATTOO- & PIERCINGPFLEGE
   HARMONIC CLEAN FINAL
   2026-08-20

   WICHTIG:
   Diese Datei ersetzt die bisherige tattoopflege-harmonic.css
   vollständig. Keine alten Korrekturblöcke darunter stehen lassen.
========================================================= */


/* =========================================================
   BASIS / CORE-ÜBERGÄNGE AUF DIESER SEITE ABSCHALTEN
   Wir steuern alle Übergänge hier vollständig selbst.
========================================================= */

body.mw-page-tattoopflege .mw-care-page,
body.mw-page-tattoopflege main#seiteninhalt{
    overflow:visible !important;
}

body.mw-page-tattoopflege .mw-care-page{
    background:#172229;
}

body.mw-page-tattoopflege .mw-care-page > section{
    position:relative;
    margin:0 !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none;
    background-clip:border-box;
}

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


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

body.mw-page-tattoopflege
main#seiteninhalt section.mw-care-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-tattoopflege .mw-care-intro .mw-care-title{
    color:#172129 !important;
}

body.mw-page-tattoopflege .mw-care-intro p,
body.mw-page-tattoopflege .mw-care-intro .mw-care-lead{
    color:#58676f !important;
}


/* Hinweisbox */

body.mw-page-tattoopflege .mw-care-note{
    background:
        linear-gradient(
            180deg,
            #151d22,
            #10171b
        ) !important;

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

body.mw-page-tattoopflege .mw-care-note h3{
    color:#f0f4f5 !important;
}

body.mw-page-tattoopflege .mw-care-note p{
    color:#b7c2c7 !important;
}


/* =========================================================
   2. JUMPNAVIGATION
   Desktop links am Viewport, sticky mitlaufend
========================================================= */

@media (min-width:1181px){

    body.mw-page-tattoopflege .mw-care-jumpbar{
        position:sticky !important;
        top:110px !important;
        left:18px !important;
        z-index:50;

        width:190px !important;
        height:auto !important;

        margin:
            0
            0
            -270px
            18px !important;

        padding:0 !important;

        background:transparent !important;
        border:0 !important;
        transform:none !important;
        pointer-events:none;
    }

    body.mw-page-tattoopflege .mw-care-jumpbar-inner{
        width:190px !important;
        margin:0 !important;

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

        padding:18px 20px !important;

        background:
            linear-gradient(
                180deg,
                rgba(19,30,36,.97),
                rgba(13,22,27,.97)
            ) !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;
    }

    body.mw-page-tattoopflege .mw-care-jumpbar a{
        display:block !important;

        padding:11px 2px !important;

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

        background:transparent !important;

        color:#b9c4c9 !important;

        font-size:.76rem;
        font-weight:700;
        line-height:1.3;
        text-decoration:none;

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

    body.mw-page-tattoopflege .mw-care-jumpbar a:last-child{
        border-bottom:0 !important;
    }

    body.mw-page-tattoopflege .mw-care-jumpbar a:hover,
    body.mw-page-tattoopflege .mw-care-jumpbar a:focus-visible{
        color:#00aeef !important;
        padding-left:7px !important;
    }
}


/* =========================================================
   3. TATTOO-PFLEGE
   Hell -> mittleres Slate
   ENDE = #65757d
========================================================= */

body.mw-page-tattoopflege
main#seiteninhalt section#tattoo-pflege{
    --mw-flow-from:#dce1e3;
    --mw-flow-bg:#65757d;
    --mw-flow-text:#172129;

    background:
        linear-gradient(
            180deg,
            #dce1e3 0%,
            #d9dfe1 13%,
            #d3dade 25%,
            #cbd3d7 37%,
            #c0c9ce 49%,
            #b2bdc2 60%,
            #a1aeb4 70%,
            #909ea5 79%,
            #819097 87%,
            #74838b 94%,
            #65757d 100%
        ) !important;

    padding-bottom:165px !important;
}

body.mw-page-tattoopflege #tattoo-pflege .mw-care-title{
    color:#172129 !important;
}

body.mw-page-tattoopflege #tattoo-pflege
.mw-care-section-head > p{
    color:#58676f !important;
}


/* Tattoo-Pflege Steps */

body.mw-page-tattoopflege #tattoo-pflege .mw-care-step{
    background:
        linear-gradient(
            180deg,
            #151d22,
            #10171b
        ) !important;

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

body.mw-page-tattoopflege #tattoo-pflege .mw-care-step h3{
    color:#f0f4f5 !important;
}

body.mw-page-tattoopflege #tattoo-pflege .mw-care-step p{
    color:#aeb9be !important;
}


/* =========================================================
   4. TATTOO – VERMEIDEN
   Start EXAKT #65757d -> dunkel #223039
   Kein Overlay, keine Pseudoelemente, kein Cut.
========================================================= */

body.mw-page-tattoopflege
main#seiteninhalt section#tattoo-vermeiden{
    --mw-flow-from:#65757d;
    --mw-flow-bg:#223039;
    --mw-flow-text:#edf1f2;

    margin-top:-1px !important;

    background:
        linear-gradient(
            180deg,
            #65757d 0%,
            #5f6f77 8%,
            #596970 16%,
            #52626b 25%,
            #4b5b64 34%,
            #44545d 43%,
            #3d4d56 52%,
            #36464f 61%,
            #304049 70%,
            #2b3a43 79%,
            #27363e 88%,
            #24323a 95%,
            #223039 100%
        ) !important;

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

body.mw-page-tattoopflege
main#seiteninhalt section#tattoo-vermeiden::before,
body.mw-page-tattoopflege
main#seiteninhalt section#tattoo-vermeiden::after{
    content:none !important;
    display:none !important;
}

body.mw-page-tattoopflege #tattoo-vermeiden .mw-care-title,
body.mw-page-tattoopflege #tattoo-vermeiden h3{
    color:#f1f4f5 !important;
}

body.mw-page-tattoopflege #tattoo-vermeiden p{
    color:#bdc8cd !important;
}

body.mw-page-tattoopflege #tattoo-vermeiden .mw-care-card{
    background:
        linear-gradient(
            180deg,
            rgba(16,23,27,.98),
            rgba(12,18,21,.98)
        ) !important;

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


/* =========================================================
   5. PIERCING-PFLEGE
   Start EXAKT #223039 -> hell #d7dde0
   PHP besitzt hier kein mw-h-flow.
========================================================= */

body.mw-page-tattoopflege
main#seiteninhalt section#piercing-pflege{
    margin-top:-1px !important;

    background:
        linear-gradient(
            180deg,
            #223039 0%,
            #2a3942 5%,
            #35454e 10%,
            #43535c 16%,
            #52626b 22%,
            #62727a 29%,
            #74838b 36%,
            #87959d 44%,
            #99a6ad 52%,
            #aab6bc 60%,
            #b9c3c8 68%,
            #c5ced2 76%,
            #ced6da 84%,
            #d4dade 92%,
            #d7dde0 100%
        ) !important;

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

    color:#172129 !important;
}

body.mw-page-tattoopflege #piercing-pflege .mw-care-title{
    color:#172129 !important;
}

body.mw-page-tattoopflege #piercing-pflege
.mw-care-section-head > p{
    color:#4f5f67 !important;
}

body.mw-page-tattoopflege #piercing-pflege .mw-care-step{
    background:
        linear-gradient(
            180deg,
            #151d22,
            #10171b
        ) !important;

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

body.mw-page-tattoopflege #piercing-pflege .mw-care-step h3{
    color:#f0f4f5 !important;
}

body.mw-page-tattoopflege #piercing-pflege .mw-care-step p{
    color:#b8c3c8 !important;
}


/* =========================================================
   6. PIERCING – VERMEIDEN
   Start EXAKT #d7dde0 -> dunkel #223039
   PHP besitzt hier kein mw-h-flow.
========================================================= */

body.mw-page-tattoopflege
main#seiteninhalt section#piercing-vermeiden{
    margin-top:-1px !important;

    background:
        linear-gradient(
            180deg,
            #d7dde0 0%,
            #d0d7db 7%,
            #c6cfd3 14%,
            #bbc5ca 21%,
            #adb8bd 29%,
            #9eabb1 37%,
            #8f9da4 45%,
            #7f8e96 53%,
            #708088 61%,
            #61717a 69%,
            #53636c 77%,
            #46565f 85%,
            #394952 92%,
            #2d3c45 97%,
            #223039 100%
        ) !important;

    padding-top:165px !important;
    padding-bottom:150px !important;

    color:#edf1f2 !important;
}

body.mw-page-tattoopflege
main#seiteninhalt section#piercing-vermeiden::before,
body.mw-page-tattoopflege
main#seiteninhalt section#piercing-vermeiden::after{
    content:none !important;
    display:none !important;
}

body.mw-page-tattoopflege #piercing-vermeiden .mw-care-title,
body.mw-page-tattoopflege #piercing-vermeiden h3{
    color:#f0f4f5 !important;
}

body.mw-page-tattoopflege #piercing-vermeiden p{
    color:#bdc8cd !important;
}

body.mw-page-tattoopflege #piercing-vermeiden .mw-care-card{
    background:
        linear-gradient(
            180deg,
            rgba(16,23,27,.98),
            rgba(12,18,21,.98)
        ) !important;

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


/* Heilungshinweis */

body.mw-page-tattoopflege .mw-care-healing-note{
    background:rgba(18,32,39,.88) !important;
    border-left-color:#00aeef !important;
}

body.mw-page-tattoopflege .mw-care-healing-note strong{
    color:#f0f4f5 !important;
}

body.mw-page-tattoopflege .mw-care-healing-note p{
    color:#bdc8cd !important;
}


/* =========================================================
   7. KONTAKT -> FOOTER
   Start EXAKT #223039 -> Footer #172229
========================================================= */

body.mw-page-tattoopflege
main#seiteninhalt section.mw-care-contact.mw-h-flow{
    --mw-flow-from:#223039;
    --mw-flow-bg:#172229;
    --mw-flow-text:#edf1f2;

    margin-top:-1px !important;

    background:
        linear-gradient(
            180deg,
            #223039 0%,
            #213038 12%,
            #202e36 24%,
            #1f2d35 36%,
            #1e2b33 48%,
            #1c2931 60%,
            #1b282f 72%,
            #1a262d 84%,
            #19242b 93%,
            #172229 100%
        ) !important;

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

body.mw-page-tattoopflege .mw-care-contact-box{
    background:
        linear-gradient(
            180deg,
            rgba(18,31,38,.98),
            rgba(13,23,28,.98)
        ) !important;

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

body.mw-page-tattoopflege .mw-care-contact-box h2{
    color:#f1f4f5 !important;
}

body.mw-page-tattoopflege .mw-care-contact-box p{
    color:#b8c3c8 !important;
}


/* =========================================================
   TABLET / MOBILE
   Navigation kompakt horizontal
========================================================= */

@media (max-width:1180px){

    body.mw-page-tattoopflege .mw-care-jumpbar{
        position:sticky !important;
        top:70px !important;
        z-index:40;

        width:100% !important;
        height:auto !important;

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

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

        backdrop-filter:blur(12px);
        pointer-events:auto;
    }

    body.mw-page-tattoopflege .mw-care-jumpbar-inner{
        width:min(1240px,calc(100% - 30px)) !important;
        margin:0 auto !important;

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

        padding:10px 0 !important;

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

    body.mw-page-tattoopflege .mw-care-jumpbar a{
        padding:6px 10px !important;

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

        background:transparent !important;
        color:#bdc7cc !important;
    }

    body.mw-page-tattoopflege .mw-care-jumpbar a:hover,
    body.mw-page-tattoopflege .mw-care-jumpbar a:focus-visible{
        padding-left:10px !important;
        color:#00aeef !important;
    }
}


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

@media (max-width:700px){

    body.mw-page-tattoopflege
    main#seiteninhalt section#tattoo-pflege{
        padding-bottom:110px !important;
    }

    body.mw-page-tattoopflege
    main#seiteninhalt section#tattoo-vermeiden{
        padding-top:110px !important;
        padding-bottom:110px !important;
    }

    body.mw-page-tattoopflege
    main#seiteninhalt section#piercing-pflege{
        padding-top:120px !important;
        padding-bottom:110px !important;
    }

    body.mw-page-tattoopflege
    main#seiteninhalt section#piercing-vermeiden{
        padding-top:110px !important;
        padding-bottom:110px !important;
    }

    body.mw-page-tattoopflege
    main#seiteninhalt section.mw-care-contact.mw-h-flow{
        padding-top:100px !important;
        padding-bottom:65px !important;
    }
}
/* =========================================================
   PIERCING-PFLEGE – TEXTKONTRAST
========================================================= */

body.mw-page-tattoopflege
#piercing-pflege .mw-care-section-head > p{
    color:#33434c !important;
    -webkit-text-fill-color:#33434c !important;
}
/* =========================================================
   MOBILE · PIERCING-PFLEGE – LESBARKEIT
========================================================= */

/* =========================================================
   MOBILE / TABLET · PIERCING-PFLEGE – LESBARKEIT
========================================================= */

@media screen and (max-width:1180px){

    body.mw-page-tattoopflege main#seiteninhalt
    section#piercing-pflege
    .mw-care-section-head > p{
        color:#f2f5f6 !important;
        -webkit-text-fill-color:#f2f5f6 !important;
        opacity:1 !important;
    }

}

/* =========================================================
   MOBILE FIX – PIERCING-PFLEGE EINLEITUNG FAST WEISS
========================================================= */

@media screen and (max-width:700px){

    body.mw-page-tattoopflege main#seiteninhalt
    section#piercing-pflege
    .mw-care-inner
    .mw-care-section-head > p{
        color:#f2f5f6 !important;
        -webkit-text-fill-color:#f2f5f6 !important;
        opacity:1 !important;
    }

}