/* =========================================================
   MOST WANTED
   HARMONIC PAGE FLOW
   piercing-studio-berlin.php
   FINAL
========================================================= */


/* =========================================================
   BASIS / KONFLIKTSCHUTZ
========================================================= */

body.mw-page-piercing-studio-berlin
main#seiteninhalt{
    background:#172229;
}


/*
   Die Standard-Pseudoelemente des Harmonic-Core werden für
   diese Seite deaktiviert.

   Grund:
   Die Übergänge werden hier vollständig innerhalb der
   jeweiligen Sektion aufgebaut. So entstehen keine
   zusätzlichen Lichtkanten oder harten Zwischenstreifen.
*/

body.mw-page-piercing-studio-berlin
main#seiteninhalt section.mw-piercing-intro.mw-h-flow::before,

body.mw-page-piercing-studio-berlin
main#seiteninhalt section.mw-piercing-intro.mw-h-flow::after,

body.mw-page-piercing-studio-berlin
main#seiteninhalt section.mw-piercing-gallery.mw-h-flow::before,

body.mw-page-piercing-studio-berlin
main#seiteninhalt section.mw-piercing-gallery.mw-h-flow::after,

body.mw-page-piercing-studio-berlin
main#seiteninhalt section.mw-piercing-services.mw-h-flow::before,

body.mw-page-piercing-studio-berlin
main#seiteninhalt section.mw-piercing-services.mw-h-flow::after,

body.mw-page-piercing-studio-berlin
main#seiteninhalt section.mw-piercing-care.mw-h-flow::before,

body.mw-page-piercing-studio-berlin
main#seiteninhalt section.mw-piercing-care.mw-h-flow::after,

body.mw-page-piercing-studio-berlin
main#seiteninhalt section.mw-piercing-faq.mw-h-flow::before,

body.mw-page-piercing-studio-berlin
main#seiteninhalt section.mw-piercing-faq.mw-h-flow::after,

body.mw-page-piercing-studio-berlin
main#seiteninhalt section.mw-piercing-u18.mw-h-flow::before,

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



/* =========================================================
   01 · INTRO

   HERO
   dunkel
   ↓
   mittleres Grau
   ↓
   heller Hauptbereich

   Der dunkle Start bleibt bewusst länger sichtbar.
========================================================= */

body.mw-page-piercing-studio-berlin
main#seiteninhalt
section.mw-piercing-intro.mw-h-flow{

    --mw-flow-from:#172229;
    --mw-flow-bg:#dce1e3;
    --mw-flow-text:#172129;

    background-color:#dce1e3 !important;

    background-image:
        linear-gradient(
            180deg,

            #172229 0%,
            #19252c 4%,
            #1d2a31 8%,
            #223039 12%,
            #293840 17%,
            #33434c 22%,
            #40515a 28%,
            #52636c 34%,
            #687982 40%,
            #819098 47%,
            #9aa7ad 54%,
            #afb9be 61%,
            #c1cacf 68%,
            #ced5d9 75%,
            #d7dde0 83%,
            #dce1e3 92%,
            #dce1e3 100%
        ) !important;

    background-repeat:no-repeat !important;
    background-size:100% 100% !important;

    color:#172129 !important;

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


/* ---------------------------------------------------------
   INTRO – LINKER TEXT

   Auf dem Screenshot war hier weißer Text auf sehr hellem
   Hintergrund. Deshalb explizit dunklere Textfarben.
--------------------------------------------------------- */

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


body.mw-page-piercing-studio-berlin
.mw-piercing-intro .mw-piercing-copy .mw-piercing-lead{
    color:#42545e !important;
    -webkit-text-fill-color:#42545e !important;
    opacity:1 !important;
}


body.mw-page-piercing-studio-berlin
.mw-piercing-intro .mw-piercing-copy > p:not(.mw-piercing-lead){
    color:#53646d !important;
    -webkit-text-fill-color:#53646d !important;
    opacity:1 !important;
}


/* ---------------------------------------------------------
   INTRO – RECHTE INFOBOX
--------------------------------------------------------- */

body.mw-page-piercing-studio-berlin
.mw-piercing-intro .mw-piercing-facts{
    background:
        linear-gradient(
            145deg,
            #141d22,
            #0e1519
        ) !important;

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

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


/* Die vier bisher zu dunklen Überschriften */

body.mw-page-piercing-studio-berlin
.mw-piercing-intro .mw-piercing-fact strong{
    color:#f1f4f5 !important;
    -webkit-text-fill-color:#f1f4f5 !important;
    opacity:1 !important;
}


/* Beschreibung unter der Überschrift */

body.mw-page-piercing-studio-berlin
.mw-piercing-intro .mw-piercing-fact small{
    color:#b9c4c9 !important;
    -webkit-text-fill-color:#b9c4c9 !important;
    opacity:1 !important;
}


/* Nummerierung */

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


/* Trennlinien etwas sauberer */

body.mw-page-piercing-studio-berlin
.mw-piercing-intro .mw-piercing-fact{
    border-color:rgba(255,255,255,.11) !important;
}



/* =========================================================
   02 · GALERIE

   Hell, aber nicht einfach mehrere Bildschirmhöhen identisch.

   Oben sehr hell.
   Unten bereits leicht grauer.
========================================================= */

body.mw-page-piercing-studio-berlin
main#seiteninhalt
section.mw-piercing-gallery.mw-h-flow{

    --mw-flow-from:#dce1e3;
    --mw-flow-bg:#c8d1d5;
    --mw-flow-text:#172129;

    background-color:#d4dade !important;

    background-image:
        linear-gradient(
            180deg,

            #dce1e3 0%,
            #dce1e3 15%,
            #d9dfe1 30%,
            #d5dcdf 44%,
            #d0d8db 58%,
            #cbd4d8 72%,
            #c5cfd3 86%,
            #bdc8cd 100%
        ) !important;

    background-repeat:no-repeat !important;
    background-size:100% 100% !important;

    color:#172129 !important;

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


/* Galerie-Texte */

body.mw-page-piercing-studio-berlin
.mw-piercing-gallery .mw-piercing-heading h2{
    color:#172129 !important;
    -webkit-text-fill-color:#172129 !important;
}


body.mw-page-piercing-studio-berlin
.mw-piercing-gallery .mw-piercing-heading > p{
    color:#52636c !important;
    -webkit-text-fill-color:#52636c !important;
    opacity:1 !important;
}


/* Bilder etwas wertiger */

body.mw-page-piercing-studio-berlin
.mw-piercing-gallery-grid figure{
    box-shadow:
        0 16px 38px rgba(23,34,41,.13) !important;
}



/* =========================================================
   03 · PIERCINGARTEN / SERVICES

   Hier beginnt das Abdunkeln wesentlich früher.

   Galerie hell
   ↓
   mittleres Grau
   ↓
   deutlich dunkler

   Damit besteht nicht mehr fast die komplette Seite aus Weiß.
========================================================= */

body.mw-page-piercing-studio-berlin
main#seiteninhalt
section.mw-piercing-services.mw-h-flow{

    --mw-flow-from:#bdc8cd;
    --mw-flow-bg:#667780;
    --mw-flow-text:#172129;

    background-color:#87959d !important;

    background-image:
        linear-gradient(
            180deg,

            #bdc8cd 0%,
            #b7c2c7 8%,
            #aebac0 16%,
            #a2afb5 24%,
            #95a3aa 32%,
            #87969d 40%,
            #798890 48%,
            #6c7c84 56%,
            #60717a 64%,
            #55666f 72%,
            #4b5c65 80%,
            #42535c 88%,
            #3b4c55 94%,
            #35464e 100%
        ) !important;

    background-repeat:no-repeat !important;
    background-size:100% 100% !important;

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


/* Heading – obere Hälfte noch ausreichend hell */

body.mw-page-piercing-studio-berlin
.mw-piercing-services .mw-piercing-heading h2{
    color:#172129 !important;
    -webkit-text-fill-color:#172129 !important;
}


body.mw-page-piercing-studio-berlin
.mw-piercing-services .mw-piercing-heading > p{
    color:#40525c !important;
    -webkit-text-fill-color:#40525c !important;
}


/* Servicekarten dunkel lassen */

body.mw-page-piercing-studio-berlin
.mw-piercing-service-grid article{
    background:
        linear-gradient(
            180deg,
            #151e23,
            #10171b
        ) !important;

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

    box-shadow:
        0 18px 38px rgba(20,31,37,.16) !important;
}


body.mw-page-piercing-studio-berlin
.mw-piercing-service-grid article h3{
    color:#f1f4f5 !important;
    -webkit-text-fill-color:#f1f4f5 !important;
}


body.mw-page-piercing-studio-berlin
.mw-piercing-service-grid article p{
    color:#bdc8cd !important;
    -webkit-text-fill-color:#bdc8cd !important;
}


body.mw-page-piercing-studio-berlin
.mw-piercing-service-grid article > span{
    color:#00aeef !important;
}



/* =========================================================
   04 · CARE / VOR- UND NACHSORGE

   Jetzt nicht mehr nur ein dünnes dunkles Band.

   Der Bereich bekommt oben und unten mehr Raum und bleibt
   über einen größeren Abschnitt wirklich dunkel.
========================================================= */

body.mw-page-piercing-studio-berlin
main#seiteninhalt
section.mw-piercing-care.mw-h-flow{

    --mw-flow-from:#35464e;
    --mw-flow-bg:#33434c;
    --mw-flow-text:#edf1f2;

    background-color:#33434c !important;

    background-image:
        linear-gradient(
            180deg,

            #35464e 0%,
            #33434c 10%,

            #33434c 28%,
            #304049 40%,
            #2d3d45 50%,

            #304049 62%,
            #33434c 74%,

            #374850 84%,
            #3d4e57 91%,
            #465861 96%,
            #52636c 100%
        ) !important;

    background-repeat:no-repeat !important;
    background-size:100% 100% !important;

    color:#edf1f2 !important;

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


/* linker Text */

body.mw-page-piercing-studio-berlin
.mw-piercing-care .mw-piercing-care-title h2{
    color:#f2f5f6 !important;
    -webkit-text-fill-color:#f2f5f6 !important;
}


body.mw-page-piercing-studio-berlin
.mw-piercing-care .mw-piercing-care-title p{
    color:#bdc8cd !important;
    -webkit-text-fill-color:#bdc8cd !important;
    opacity:1 !important;
}


/* dunkle Care-Karten */

body.mw-page-piercing-studio-berlin
.mw-piercing-care-columns article{
    background:
        linear-gradient(
            180deg,
            #131b20,
            #0d1418
        ) !important;

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

    box-shadow:
        0 18px 42px rgba(10,17,21,.18) !important;
}


body.mw-page-piercing-studio-berlin
.mw-piercing-care-columns article h3{
    color:#f3f6f7 !important;
    -webkit-text-fill-color:#f3f6f7 !important;
}


body.mw-page-piercing-studio-berlin
.mw-piercing-care-columns article li{
    color:#bdc8cd !important;
    -webkit-text-fill-color:#bdc8cd !important;
}


body.mw-page-piercing-studio-berlin
.mw-piercing-care-columns article li strong{
    color:#f2f5f6 !important;
    -webkit-text-fill-color:#f2f5f6 !important;
}



/* =========================================================
   05 · FAQ

   Care dunkel
   ↓
   langsam hell
   ↓
   FAQ gut lesbar
   ↓
   UNTEN bereits wieder deutlich dunkler

   Dadurch ist auch der Übergang zum U18-Bereich nicht mehr
   plötzlich hell -> schwarz.
========================================================= */

body.mw-page-piercing-studio-berlin
main#seiteninhalt
section.mw-piercing-faq.mw-h-flow{

    --mw-flow-from:#52636c;
    --mw-flow-bg:#d4dade;
    --mw-flow-text:#172129;

    background-color:#d4dade !important;

    background-image:
        linear-gradient(
            180deg,

            /* aus Care heraus */
            #52636c 0%,
            #62727b 5%,
            #75848c 10%,
            #8b989f 16%,
            #a0abb1 22%,
            #b3bdc2 28%,
            #c3ccd0 34%,
            #ced5d8 40%,
            #d4dade 46%,

            /* ruhige helle FAQ-Zone */
            #d4dade 66%,

            /* früh genug wieder abdunkeln */
            #ced6da 72%,
            #c2ccd1 77%,
            #b1bdc2 82%,
            #9dabb1 87%,
            #86959d 91%,
            #71818a 94%,
            #5d6e77 97%,
            #4b5d66 100%
        ) !important;

    background-repeat:no-repeat !important;
    background-size:100% 100% !important;

    color:#172129 !important;

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


/* ---------------------------------------------------------
   FAQ HEADING
--------------------------------------------------------- */

body.mw-page-piercing-studio-berlin
.mw-piercing-faq .mw-piercing-heading h2{
    color:#172129 !important;
    -webkit-text-fill-color:#172129 !important;
}


body.mw-page-piercing-studio-berlin
.mw-piercing-faq .mw-piercing-heading > p{
    color:#52636d !important;
    -webkit-text-fill-color:#52636d !important;
    opacity:1 !important;
}


/* ---------------------------------------------------------
   FAQ – FRAGEN
--------------------------------------------------------- */

body.mw-page-piercing-studio-berlin
.mw-piercing-faq-list details{
    border-color:rgba(31,49,59,.16) !important;
}


body.mw-page-piercing-studio-berlin
.mw-piercing-faq-list summary{
    position:relative;

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

    opacity:1 !important;

    list-style:none;
}


body.mw-page-piercing-studio-berlin
.mw-piercing-faq-list summary::-webkit-details-marker{
    display:none;
}


/* ---------------------------------------------------------
   FAQ – PLUS / MINUS

   WICHTIG:
   Keine echten Sonderzeichen im CSS verwenden.

   \002B = Plus
   \2212 = mathematisches Minus

   Damit können keine –-Zeichen mehr durch eine
   falsche Dateikodierung entstehen.
--------------------------------------------------------- */

body.mw-page-piercing-studio-berlin
.mw-piercing-faq-list summary::after{
    content:"\002B" !important;

    position:absolute;

    right:4px;
    top:50%;

    color:#00aeef !important;
    -webkit-text-fill-color:#00aeef !important;

    font-family:Arial, Helvetica, sans-serif !important;
    font-size:1.65rem !important;
    font-weight:600 !important;
    line-height:1 !important;

    transform:translateY(-50%);
}


body.mw-page-piercing-studio-berlin
.mw-piercing-faq-list details[open] summary::after{
    content:"\2212" !important;
}


/* ---------------------------------------------------------
   FAQ – GEÖFFNETE ANTWORTEN

   Auf dem Screenshot fast weiß und dadurch kaum lesbar.
--------------------------------------------------------- */

body.mw-page-piercing-studio-berlin
.mw-piercing-faq-list details p{
    color:#53646d !important;
    -webkit-text-fill-color:#53646d !important;

    opacity:1 !important;
}


body.mw-page-piercing-studio-berlin
.mw-piercing-faq-list details[open] p{
    color:#43565f !important;
    -webkit-text-fill-color:#43565f !important;

    opacity:1 !important;
}



/* =========================================================
   06 · U18

   FAQ endet bereits bei #4b5d66.

   Deshalb kein harter Sprung mehr von fast Weiß direkt
   zu #172229.
========================================================= */

body.mw-page-piercing-studio-berlin
main#seiteninhalt
section.mw-piercing-u18.mw-h-flow{

    --mw-flow-from:#4b5d66;
    --mw-flow-bg:#172229;
    --mw-flow-text:#edf1f2;

    background-color:#172229 !important;

    background-image:
        linear-gradient(
            180deg,

            #4b5d66 0%,
            #455760 6%,
            #40515a 12%,
            #394a52 19%,
            #33434c 27%,
            #2d3d45 35%,
            #283840 44%,
            #233139 53%,
            #1f2c33 63%,
            #1b272e 74%,
            #19242b 84%,
            #172229 94%,
            #172229 100%
        ) !important;

    background-repeat:no-repeat !important;
    background-size:100% 100% !important;

    color:#edf1f2 !important;

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


/* U18 Box */

body.mw-page-piercing-studio-berlin
.mw-piercing-u18-box{
    background:
        linear-gradient(
            145deg,
            #121a1f,
            #0d1418
        ) !important;

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

    box-shadow:
        0 22px 50px rgba(7,15,19,.20) !important;
}


body.mw-page-piercing-studio-berlin
.mw-piercing-u18-box h2{
    color:#f3f6f7 !important;
    -webkit-text-fill-color:#f3f6f7 !important;
}


body.mw-page-piercing-studio-berlin
.mw-piercing-u18-box p{
    color:#bdc8cd !important;
    -webkit-text-fill-color:#bdc8cd !important;
    opacity:1 !important;
}



/* =========================================================
   KICKER / BLAUE LABELS
========================================================= */

body.mw-page-piercing-studio-berlin
.mw-piercing-kicker{
    color:#00aeef !important;
    -webkit-text-fill-color:#00aeef !important;
    opacity:1 !important;
}



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

@media(max-width:700px){

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


    body.mw-page-piercing-studio-berlin
    main#seiteninhalt
    section.mw-piercing-gallery.mw-h-flow{
        padding-top:95px !important;
        padding-bottom:100px !important;
    }


    body.mw-page-piercing-studio-berlin
    main#seiteninhalt
    section.mw-piercing-services.mw-h-flow{
        padding-top:100px !important;
        padding-bottom:110px !important;
    }


    body.mw-page-piercing-studio-berlin
    main#seiteninhalt
    section.mw-piercing-care.mw-h-flow{
        padding-top:115px !important;
        padding-bottom:120px !important;
    }


    body.mw-page-piercing-studio-berlin
    main#seiteninhalt
    section.mw-piercing-faq.mw-h-flow{
        padding-top:110px !important;
        padding-bottom:125px !important;
    }


    body.mw-page-piercing-studio-berlin
    main#seiteninhalt
    section.mw-piercing-u18.mw-h-flow{
        padding-top:120px !important;
        padding-bottom:100px !important;
    }


    body.mw-page-piercing-studio-berlin
    .mw-piercing-faq-list summary{
        padding-right:42px !important;
    }
    /* =====================================================
       MOBILE · INTRO-LESBARKEIT
       piercing-studio-berlin.php
       Bleibt bewusst innerhalb des @media-Blocks.
    ===================================================== */

    body.mw-page-piercing-studio-berlin
    .mw-piercing-intro .mw-piercing-copy h2{
        color:#f4f7f8 !important;
        -webkit-text-fill-color:#f4f7f8 !important;
    }

    body.mw-page-piercing-studio-berlin
    .mw-piercing-intro .mw-piercing-copy .mw-piercing-lead{
        color:#dce4e7 !important;
        -webkit-text-fill-color:#dce4e7 !important;
        opacity:1 !important;
    }

    body.mw-page-piercing-studio-berlin
    .mw-piercing-intro .mw-piercing-copy > p:not(.mw-piercing-lead){
        color:#c8d2d7 !important;
        -webkit-text-fill-color:#c8d2d7 !important;
        opacity:1 !important;
    }

}