/* =========================================================
   MOST WANTED – JOBS HARMONIC FINAL
========================================================= */


/* =========================================================
   1. INTRO
========================================================= */

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


/* Texte im hellen Intro sauber lesbar */
body.mw-page-jobs .mw-jobs-intro h1,
body.mw-page-jobs .mw-jobs-intro h2,
body.mw-page-jobs .mw-jobs-intro h3{
    color:#172129 !important;
}

body.mw-page-jobs .mw-jobs-intro p{
    color:#526169 !important;
}


/* =========================================================
   2. WARUM MOST WANTED
========================================================= */

body.mw-page-jobs main#seiteninhalt section.mw-jobs-why.mw-h-flow{
    --mw-flow-from:#dce1e3;
    --mw-flow-bg:#d4dade;
    --mw-flow-text:#172129;
}

body.mw-page-jobs .mw-jobs-why h1,
body.mw-page-jobs .mw-jobs-why h2,
body.mw-page-jobs .mw-jobs-why h3{
    color:#172129 !important;
}

body.mw-page-jobs .mw-jobs-why p{
    color:#526169 !important;
}


/* =========================================================
   3. OFFENE STELLEN
========================================================= */

body.mw-page-jobs main#seiteninhalt section.mw-jobs-openings.mw-h-flow{
    --mw-flow-from:#d4dade;
    --mw-flow-bg:#9eabb1;
    --mw-flow-text:#172129;

    background:
        linear-gradient(
            180deg,
            #d4dade 0%,
            #c9d1d5 8%,
            #bcc6ca 18%,
            #aeb9be 32%,
            #9eabb1 48%,
            #9eabb1 100%
        ) !important;
}


/* Überschrift */
body.mw-page-jobs .mw-jobs-openings h1,
body.mw-page-jobs .mw-jobs-openings h2,
body.mw-page-jobs .mw-jobs-openings h3{
    color:#172129 !important;
}


/* Beschreibung rechts neben "Aktuell suchen wir Verstärkung" */
body.mw-page-jobs .mw-jobs-openings p{
    color:#56666f !important;
}


/* kleine blaue Labels bleiben blau */
body.mw-page-jobs .mw-jobs-openings .mw-jobs-kicker,
body.mw-page-jobs .mw-jobs-openings [class*="kicker"]{
    color:#00aeef !important;
}


/* Jobkarten bleiben bewusst dunkel */
body.mw-page-jobs .mw-jobs-openings [class*="card"]{
    color:#edf1f2;
}


/* Headlines auf den dunklen Jobkarten */
body.mw-page-jobs .mw-jobs-openings [class*="card"] h2,
body.mw-page-jobs .mw-jobs-openings [class*="card"] h3{
    color:#f2f5f6 !important;
}


/* Fließtext auf Jobkarten */
body.mw-page-jobs .mw-jobs-openings [class*="card"] p,
body.mw-page-jobs .mw-jobs-openings [class*="card"] li{
    color:#bdc7cc !important;
}


/* =========================================================
   4. BEWERBUNG / CTA
   LANGER, WEICHER ÜBERGANG
========================================================= */

body.mw-page-jobs main#seiteninhalt section.mw-jobs-application.mw-h-flow{
    --mw-flow-from:#9eabb1;
    --mw-flow-bg:#172229;
    --mw-flow-text:#edf1f2;

    background:
        linear-gradient(
            180deg,
            #9eabb1 0%,
            #919fa7 7%,
            #82919a 14%,
            #71818a 22%,
            #607079 30%,
            #506069 39%,
            #42515a 48%,
            #35444d 58%,
            #2b3942 68%,
            #223039 78%,
            #1c2931 88%,
            #172229 100%
        ) !important;

    padding-top:160px;
}


/* Core-Pseudoübergang hier ausschalten.
   Wir machen den Verlauf komplett selbst. */
body.mw-page-jobs main#seiteninhalt section.mw-jobs-application.mw-h-flow::before{
    content:none !important;
    display:none !important;
}


/* Bewerbungskarte */
body.mw-page-jobs .mw-jobs-application [class*="card"],
body.mw-page-jobs .mw-jobs-application [class*="box"]{
    background:
        linear-gradient(
            180deg,
            rgba(17,24,28,.98),
            rgba(13,19,22,.98)
        ) !important;

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


/* Texte Bewerbung */
body.mw-page-jobs .mw-jobs-application h1,
body.mw-page-jobs .mw-jobs-application h2,
body.mw-page-jobs .mw-jobs-application h3{
    color:#f1f4f5 !important;
}

body.mw-page-jobs .mw-jobs-application p{
    color:#b9c4c9 !important;
}


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

@media(max-width:700px){

    body.mw-page-jobs main#seiteninhalt section.mw-jobs-application.mw-h-flow{
        padding-top:110px;

        background:
            linear-gradient(
                180deg,
                #9eabb1 0%,
                #8a989f 10%,
                #75848d 22%,
                #607079 35%,
                #4b5b64 48%,
                #394851 61%,
                #2b3942 74%,
                #223039 86%,
                #172229 100%
            ) !important;
    }
}

/* =========================================================
   JOBS – FINALKORREKTUREN
========================================================= */


/* ---------------------------------------------------------
   1. DUNKLE INFOKARTEN IM INTRO
   Überschriften und Texte sauber lesbar
--------------------------------------------------------- */

body.mw-page-jobs .mw-jobs-intro [class*="card"] h3,
body.mw-page-jobs .mw-jobs-intro [class*="card"] h4,
body.mw-page-jobs .mw-jobs-intro [class*="card"] strong,
body.mw-page-jobs .mw-jobs-intro [class*="card"] b{
    color:#edf1f2 !important;
    -webkit-text-fill-color:#edf1f2 !important;
}

body.mw-page-jobs .mw-jobs-intro [class*="card"] p,
body.mw-page-jobs .mw-jobs-intro [class*="card"] span:not([class*="kicker"]){
    color:#aeb9be !important;
}


/* Falls der Kasten keine "card"-Klasse trägt:
   typische Listen-/Infoelemente ebenfalls abfangen */

body.mw-page-jobs .mw-jobs-intro [class*="requirements"] h3,
body.mw-page-jobs .mw-jobs-intro [class*="requirements"] h4,
body.mw-page-jobs .mw-jobs-intro [class*="requirements"] strong,
body.mw-page-jobs .mw-jobs-intro [class*="requirements"] b,
body.mw-page-jobs .mw-jobs-intro [class*="facts"] h3,
body.mw-page-jobs .mw-jobs-intro [class*="facts"] h4,
body.mw-page-jobs .mw-jobs-intro [class*="facts"] strong,
body.mw-page-jobs .mw-jobs-intro [class*="facts"] b{
    color:#edf1f2 !important;
    -webkit-text-fill-color:#edf1f2 !important;
}


/* ---------------------------------------------------------
   2. BRUCH VOR "AKTUELL SUCHEN WIR VERSTÄRKUNG"
   Core-Übergang ausschalten und Fläche selbst weich aufbauen
--------------------------------------------------------- */

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


body.mw-page-jobs main#seiteninhalt section.mw-jobs-openings.mw-h-flow{
    background:
        linear-gradient(
            180deg,
            #d4dade 0%,
            #d1d8dc 5%,
            #cbd3d7 10%,
            #c3ccd0 16%,
            #bac4c9 23%,
            #b1bcc1 31%,
            #a9b4ba 40%,
            #a2aeb4 50%,
            #9eabb1 62%,
            #9eabb1 100%
        ) !important;

    padding-top:130px !important;
}


/* ---------------------------------------------------------
   3. ÜBERGANG OPENINGS -> APPLICATION
   ebenfalls ohne Core-Doppelverlauf
--------------------------------------------------------- */

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

body.mw-page-jobs main#seiteninhalt section.mw-jobs-application.mw-h-flow{
    background:
        linear-gradient(
            180deg,
            #9eabb1 0%,
            #919fa7 7%,
            #82919a 14%,
            #71818a 22%,
            #607079 31%,
            #506069 40%,
            #42515a 50%,
            #35444d 60%,
            #2b3942 70%,
            #223039 80%,
            #1c2931 90%,
            #172229 100%
        ) !important;

    padding-top:150px !important;
}

/* =========================================================
   JOBS – LESBARKEIT DUNKLER KARTEN
========================================================= */


/* ---------------------------------------------------------
   WHY-CARDS
   Headlines auf dunklem Hintergrund hell
--------------------------------------------------------- */

body.mw-page-jobs .mw-jobs-why [class*="card"] h2,
body.mw-page-jobs .mw-jobs-why [class*="card"] h3,
body.mw-page-jobs .mw-jobs-why [class*="card"] h4,
body.mw-page-jobs .mw-jobs-why [class*="card"] strong{
    color:#edf1f2 !important;
    -webkit-text-fill-color:#edf1f2 !important;
}


/* Fließtext innerhalb der dunklen Why-Cards */
body.mw-page-jobs .mw-jobs-why [class*="card"] p{
    color:#9eabb1 !important;
}


/* ---------------------------------------------------------
   JOBKARTEN – BEWERBUNGSBUTTONS
   Normalzustand heller, Hover NICHT verändern
--------------------------------------------------------- */

body.mw-page-jobs .mw-jobs-openings a[class*="btn"]:not(:hover),
body.mw-page-jobs .mw-jobs-openings a[class*="button"]:not(:hover),
body.mw-page-jobs .mw-jobs-openings button:not(:hover){
    color:#dce3e6 !important;
    -webkit-text-fill-color:#dce3e6 !important;
}

/* =========================================================
   JOBS – WHY-KACHELN HEADLINES FINAL
========================================================= */

/* Die vier Headlines innerhalb der dunklen Kacheln */
body.mw-page-jobs main#seiteninhalt .mw-jobs-why h3,
body.mw-page-jobs main#seiteninhalt .mw-jobs-why h4{
    color:#f1f4f5 !important;
    -webkit-text-fill-color:#f1f4f5 !important;
    opacity:1 !important;
}
/* =========================================================
   JOBS – DUNKLE KACHELN: TEXTFARBEN
   Nur jobs.php; Desktop + Mobil.
   Diese Selektoren sind absichtlich seiten- und bereichsspezifisch,
   damit globale .mw-h-light-Regeln sie nicht überschreiben.
========================================================= */

/* "Warum Most Wanted?" – vier dunkle Benefit-Kacheln */
body.mw-page-jobs main#seiteninhalt section.mw-jobs-why .mw-jobs-benefit-grid > article h3,
body.mw-page-jobs main#seiteninhalt section.mw-jobs-why .mw-jobs-benefit-grid > article p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* "Offene Stellen" – beide dunklen Job-Kacheln */
body.mw-page-jobs main#seiteninhalt section.mw-jobs-openings .mw-jobs-opening-card h3,
body.mw-page-jobs main#seiteninhalt section.mw-jobs-openings .mw-jobs-opening-card h4,
body.mw-page-jobs main#seiteninhalt section.mw-jobs-openings .mw-jobs-opening-card > p,
body.mw-page-jobs main#seiteninhalt section.mw-jobs-openings .mw-jobs-opening-card li {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Blaue Labels/Punkte bleiben unverändert blau. */
body.mw-page-jobs main#seiteninhalt section.mw-jobs-openings .mw-jobs-opening-type,
body.mw-page-jobs main#seiteninhalt section.mw-jobs-openings .mw-jobs-opening-card li::before {
    color: var(--mw-jobs-blue) !important;
    -webkit-text-fill-color: var(--mw-jobs-blue) !important;
}

/* WAS WIR SUCHEN: nur die vier Titel in der dunklen Facts-Box. */
body.mw-page-jobs main#seiteninhalt section.mw-jobs-intro .mw-jobs-facts .mw-jobs-fact strong {
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    opacity:1 !important;
}