/*
 * proAct Consulting – Jobinserat-Detailseite (single-jobs.php)
 * Nutzt die :root-Variablen aus style.css.
 */

/* ==========================================================================
   Header-Block
   ========================================================================== */
.jd-article{ background:#fff; }

.jd-header{
    background:var(--c-navy-deep);
    color:#fff;
    padding:60px 0 90px;
    position:relative;
}

.jd-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--c-on-navy-sub);
    font-weight:600;
    font-size:14px;
    letter-spacing:.4px;
    margin-bottom:38px;
    transition:color .2s ease;
}
.jd-back:hover{ color:var(--c-green); }
.jd-back svg{ width:18px; height:18px; }

.jd-header__top{
    display:flex;
    align-items:center;
    gap:22px;
    margin-bottom:26px;
    flex-wrap:wrap;
}
.jd-header__logo{
    width:84px;
    height:84px;
    background:#fff;
    border-radius:var(--r-md);
    padding:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.jd-header__logo img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
}
.jd-header__logo-ph{
    color:var(--c-muted);
    font-size:12px;
    font-weight:700;
    letter-spacing:.5px;
}
.jd-header__logo--anon{
    color:var(--c-green);
}
.jd-header__logo--anon svg{ width:40px; height:40px; }
.jd-header__firma{
    color:var(--c-on-navy-sub);
    font-weight:700;
    font-size:16px;
    letter-spacing:.6px;
    text-transform:uppercase;
}

.jd-header__title{
    color:#fff;
    font-size:52px;
    font-weight:800;
    letter-spacing:-1px;
    line-height:1.1;
    margin:0 0 44px;
    max-width:900px;
}

.jd-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    padding:28px 0 0;
    border-top:1px solid var(--c-border-hd);
}
.jd-grid__item{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.jd-grid__label{
    color:var(--c-label-navy);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.2px;
}
.jd-grid__value{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-weight:600;
    font-size:16px;
}
.jd-grid__value svg{
    width:18px;
    height:18px;
    color:var(--c-green);
    flex-shrink:0;
}

/* ==========================================================================
   Body (2-spaltig)
   ========================================================================== */
.jd-body{
    background:#fff;
    padding:80px 0 120px;
}
.jd-body__grid{
    display:grid;
    grid-template-columns:1fr 380px;
    gap:60px;
    align-items:start;
    margin-top:-50px;
}

.jd-body__main{
    background:#fff;
}

.jd-lead{
    font-size:20px;
    line-height:1.6;
    color:var(--c-ink);
    font-weight:600;
    margin-bottom:36px;
    padding-bottom:30px;
    border-bottom:1px solid var(--c-border);
}

.jd-content{
    color:var(--c-body);
    font-size:16.5px;
    line-height:1.75;
}
.jd-content h2{
    font-size:26px;
    font-weight:800;
    color:var(--c-ink);
    margin:44px 0 18px;
    letter-spacing:-.3px;
}
.jd-content h3{
    font-size:20px;
    font-weight:800;
    color:var(--c-ink);
    margin:36px 0 14px;
}
.jd-content p{ margin:0 0 18px; }
.jd-content ul,
.jd-content ol{
    padding:0;
    margin:0 0 22px;
    list-style:none;
}
.jd-content ul li{
    position:relative;
    padding:6px 0 6px 28px;
    line-height:1.65;
}
.jd-content ul li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:6px;
    color:var(--c-green);
    font-weight:800;
    font-size:16px;
}
.jd-content ol{ counter-reset:jdol; }
.jd-content ol li{
    counter-increment:jdol;
    position:relative;
    padding:6px 0 6px 32px;
    line-height:1.65;
}
.jd-content ol li::before{
    content:counter(jdol) ".";
    position:absolute;
    left:0;
    top:6px;
    color:var(--c-green);
    font-weight:800;
}
.jd-content a{
    color:var(--c-green);
    font-weight:600;
    text-decoration:underline;
}
.jd-content a:hover{ color:var(--c-green-dark); }
.jd-content strong{ color:var(--c-ink); }

.jd-dsgvo{
    margin-top:48px;
    padding-top:24px;
    border-top:1px solid var(--c-border);
    color:var(--c-muted);
    font-size:12.5px;
    line-height:1.6;
}
.jd-dsgvo a{ color:var(--c-muted); text-decoration:underline; }
.jd-dsgvo a:hover{ color:var(--c-green); }

/* ==========================================================================
   Aside / Bewerbungs-Box (sticky)
   ========================================================================== */
.jd-apply{
    position:sticky;
    top:100px;
}
.jd-apply__inner{
    background:#fff;
    border:1px solid var(--c-border);
    border-radius:var(--r-lg);
    padding:36px 32px;
    box-shadow:var(--sh-card-lg);
}
.jd-apply__inner .pa-pill{ margin-bottom:14px; }
.jd-apply__inner h2{
    font-size:26px;
    font-weight:800;
    letter-spacing:-.3px;
    margin:0 0 16px;
    color:var(--c-ink);
}
.jd-apply__contact{
    color:var(--c-body);
    font-size:15px;
    margin:0 0 14px;
    line-height:1.6;
}
.jd-apply__contact strong{ color:var(--c-ink); }
.jd-apply__info{
    color:var(--c-muted);
    font-size:14.5px;
    line-height:1.6;
    margin:0 0 24px;
}
.jd-apply__btn{
    display:block;
    width:100%;
    text-align:center;
    padding:19px 20px;
}
.jd-apply__meta{
    margin-top:22px;
    padding-top:20px;
    border-top:1px solid var(--c-border);
    display:flex;
    flex-direction:column;
    gap:10px;
}
.jd-apply__meta a{
    color:var(--c-body);
    font-size:14.5px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:color .2s ease;
}
.jd-apply__meta a:hover{ color:var(--c-green); }
.jd-apply__meta svg{
    width:16px;
    height:16px;
    color:var(--c-green);
    flex-shrink:0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:980px){
    .jd-header{ padding:40px 0 70px; }
    .jd-header__title{ font-size:36px; }
    .jd-grid{ grid-template-columns:repeat(2,1fr); }

    .jd-body__grid{
        grid-template-columns:1fr;
        gap:40px;
    }
    .jd-apply{ position:static; }
}

@media (max-width:640px){
    .jd-header{ padding:32px 0 60px; }
    .jd-header__title{ font-size:28px; }
    .jd-grid{ grid-template-columns:1fr; gap:18px; }
    .jd-lead{ font-size:17px; }
    .jd-body{ padding:60px 0 90px; }
    .jd-apply__inner{ padding:28px 22px; }
    .jd-apply__inner h2{ font-size:22px; }
}