/**
 * Job Profile Generator – Public Frontend Stylesheet
 * Für die öffentlichen Job-Ansichten (/jobs/:slug, /career/:slug)
 *
 * @package CMS_JobProfileGenerator
 * @since   0.0.1
 */

/* ═══════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES (überschreibbar via Corporate Design)
═══════════════════════════════════════════════════════════ */
:root {
    --jpg-primary:       #3b82f6;
    --jpg-primary-dark:  #2563eb;
    --jpg-secondary:     #1e293b;
    --jpg-bg:            #f8fafc;
    --jpg-card-bg:       #fff;
    --jpg-text:          #1e293b;
    --jpg-text-muted:    #64748b;
    --jpg-border:        #e2e8f0;
    --jpg-radius:        10px;
    --jpg-font-body:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --jpg-font-heading:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ═══════════════════════════════════════════════════════════
   BASE RESET (scoped to .jpg-public)
═══════════════════════════════════════════════════════════ */
.jpg-public *,
.jpg-public *::before,
.jpg-public *::after {
    box-sizing: border-box;
}

.jpg-public {
    font-family: var(--jpg-font-body);
    color: var(--jpg-text);
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   JOB CARD LAYOUT
═══════════════════════════════════════════════════════════ */
.jpg-job-card {
    background: var(--jpg-card-bg);
    border-radius: var(--jpg-radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
    overflow: hidden;
}

.jpg-job-header {
    background: var(--jpg-primary);
    color: #fff;
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.jpg-job-header h1 {
    font-family: var(--jpg-font-heading);
    font-size: 1.6rem;
    margin: 0 0 .5rem;
    font-weight: 700;
}

.jpg-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .85rem;
    opacity: .9;
}

.jpg-job-body {
    padding: 2rem;
}

.jpg-job-two-col {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════
   SECTIONS
═══════════════════════════════════════════════════════════ */
.jpg-section {
    margin-bottom: 1.5rem;
}

.jpg-section h2 {
    font-size: 1rem;
    color: var(--jpg-primary);
    font-weight: 700;
    margin: 0 0 .5rem;
    padding-bottom: .25rem;
    border-bottom: 2px solid var(--jpg-primary);
}

.jpg-section h3 {
    font-size: .875rem;
    font-weight: 600;
    color: var(--jpg-text-muted);
    margin: .75rem 0 .25rem;
}

.jpg-section ul {
    padding-left: 1.25rem;
    margin: 0;
}

.jpg-section li {
    margin-bottom: .25rem;
    font-size: .9rem;
    line-height: 1.6;
}

.jpg-section p {
    font-size: .9rem;
    line-height: 1.7;
    margin: 0 0 .75rem;
    color: var(--jpg-text-muted);
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR BOXES
═══════════════════════════════════════════════════════════ */
.jpg-aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.jpg-aside-box {
    background: var(--jpg-bg);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--jpg-border);
}

.jpg-aside-box h2 {
    font-size: .9rem;
    color: var(--jpg-primary);
    font-weight: 700;
    margin: 0 0 .5rem;
    border-bottom: none;
    padding-bottom: 0;
}

.jpg-aside-box li {
    list-style: none;
    font-size: .85rem;
    padding: .2rem 0;
}

/* ═══════════════════════════════════════════════════════════
   SKILL TAGS
═══════════════════════════════════════════════════════════ */
.jpg-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.jpg-skill-tag {
    background: color-mix(in srgb, var(--jpg-primary) 15%, transparent);
    color: var(--jpg-primary);
    font-size: .78rem;
    padding: .2rem .55rem;
    border-radius: 12px;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   APPLY SECTION
═══════════════════════════════════════════════════════════ */
.jpg-apply-section {
    background: var(--jpg-bg);
    padding: 1.5rem 2rem;
    border-top: 3px solid var(--jpg-primary);
}

.jpg-apply-section h2 {
    color: var(--jpg-primary);
    margin: 0 0 .5rem;
    font-size: 1.1rem;
}

.jpg-apply-section p {
    font-size: .9rem;
    color: var(--jpg-text-muted);
    line-height: 1.7;
}

.jpg-btn-apply {
    display: inline-block;
    background: var(--jpg-primary);
    color: #fff;
    padding: .75rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: .95rem;
    margin-top: .75rem;
    transition: background .15s;
}

.jpg-btn-apply:hover {
    background: var(--jpg-primary-dark);
}

/* ═══════════════════════════════════════════════════════════
   SALARY BADGE
═══════════════════════════════════════════════════════════ */
.jpg-salary-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #d1fae5;
    color: #065f46;
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   JSON-LD (invisible, semantic only)
═══════════════════════════════════════════════════════════ */
.jpg-jsonld {
    display: none;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .jpg-job-two-col {
        grid-template-columns: 1fr;
    }

    .jpg-job-header {
        flex-direction: column;
    }

    .jpg-job-body {
        padding: 1.25rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   ARCHIVE: JOB LIST (jobs-list.php)
═══════════════════════════════════════════════════════════ */

.jpg-jobs-list { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }

.jpg-jobs-list__header       { margin-bottom: 1.5rem; }
.jpg-jobs-list__header h1    { font-size: 1.75rem; font-weight: 700; margin: 0 0 .25rem; }
.jpg-jobs-list__subtitle     { color: var(--jpg-text-muted); font-size: .95rem; margin: 0; }

/* Filter-Leiste */
.jpg-jobs-list__filters    { background: var(--jpg-bg); border: 1px solid var(--jpg-border); border-radius: var(--jpg-radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.jpg-jobs-list__filter-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.jpg-filter-input,
.jpg-filter-select {
    padding: .5rem .875rem;
    border: 1.5px solid var(--jpg-border);
    border-radius: 7px;
    font-size: .9rem;
    background: var(--jpg-card-bg);
    color: var(--jpg-text);
    flex: 1;
    min-width: 140px;
}
.jpg-filter-input:focus,
.jpg-filter-select:focus {
    outline: none;
    border-color: var(--jpg-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jpg-primary) 15%, transparent);
}
.jpg-filter-input--salary { max-width: 160px; }

.jpg-filter-btn {
    padding: .5rem 1.25rem;
    background: var(--jpg-primary);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 600;
}
.jpg-filter-btn:hover    { background: var(--jpg-primary-dark); }

.jpg-filter-reset        { color: var(--jpg-text-muted); font-size: .875rem; text-decoration: none; white-space: nowrap; }
.jpg-filter-reset:hover  { color: #ef4444; }

/* Job-Karten */
.jpg-jobs-list__grid     { display: flex; flex-direction: column; gap: 1rem; }

.jpg-job-card-list {
    background: var(--jpg-card-bg);
    border: 1px solid var(--jpg-border);
    border-radius: var(--jpg-radius);
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    transition: box-shadow .15s;
}
.jpg-job-card-list:hover            { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.jpg-job-card-list__body            { flex: 1; min-width: 0; }
.jpg-job-card-list__title           { font-size: 1.1rem; font-weight: 700; margin: 0 0 .5rem; }
.jpg-job-card-list__title a         { color: var(--jpg-text); text-decoration: none; }
.jpg-job-card-list__title a:hover   { color: var(--jpg-primary); }
.jpg-job-card-list__meta            { display: flex; flex-wrap: wrap; gap: .5rem .875rem; margin-bottom: .6rem; }
.jpg-meta-item                      { font-size: .825rem; color: var(--jpg-text-muted); }
.jpg-meta-type                      { background: #eff6ff; color: #1d4ed8; padding: .15rem .5rem; border-radius: 4px; }
.jpg-meta-remote                    { background: #f0fdf4; color: #166534; padding: .15rem .5rem; border-radius: 4px; }
.jpg-meta-salary                    { background: #fef9c3; color: #713f12; padding: .15rem .5rem; border-radius: 4px; }
.jpg-job-card-list__summary         { color: var(--jpg-text-muted); font-size: .875rem; margin: 0; line-height: 1.5; }
.jpg-job-card-list__action          { flex-shrink: 0; }

/* Kategorie-Badge */
.jpg-meta-category                  { background: #f3e8ff; color: #6b21a8; padding: .15rem .5rem; border-radius: 4px; }

/* ── Karten-Stil: Grid (Kacheln) ──────────────────────────────────── */
.jpg-jobs-list__grid--grid          { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.jpg-job-card-list--grid            { flex-direction: column; align-items: stretch; }
.jpg-job-card-list--grid .jpg-job-card-list__action {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--jpg-border);
    text-align: center;
}
.jpg-job-card-list--grid .jpg-job-card-list__action .jpg-btn { width: 100%; text-align: center; }

/* ── Karten-Stil: Minimal (Zeilen) ────────────────────────────────── */
.jpg-jobs-list__grid--minimal       { gap: 0; }
.jpg-job-card-list--minimal {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    padding: .875rem 1rem;
    align-items: center;
    gap: 1rem;
}
.jpg-job-card-list--minimal:first-child { border-top: 1px solid var(--jpg-border); }
.jpg-job-card-list--minimal:hover   { box-shadow: none; background: var(--jpg-bg, #f8fafc); }
.jpg-job-card-list--minimal .jpg-job-card-list__title { font-size: 1rem; margin-bottom: .25rem; }
.jpg-job-card-list--minimal .jpg-job-card-list__meta  { margin-bottom: 0; }
.jpg-job-card-list--minimal .jpg-job-card-list__summary { display: none; }
.jpg-job-card-list--minimal .jpg-job-card-list__action .jpg-btn {
    padding: .4rem .875rem;
    font-size: .8rem;
}

/* Buttons (generisch) */
.jpg-btn              { display: inline-block; padding: .6rem 1.25rem; border-radius: 7px; font-size: .875rem; font-weight: 600; text-decoration: none; cursor: pointer; border: none; }
.jpg-btn-primary      { background: var(--jpg-primary);      color: #fff; }
.jpg-btn-primary:hover{ background: var(--jpg-primary-dark); }
.jpg-btn-secondary    { background: #f1f5f9; color: var(--jpg-text-muted); }
.jpg-btn-secondary:hover { background: #e2e8f0; }

/* Empty state */
.jpg-jobs-list__empty { background: var(--jpg-card-bg); border: 1px solid var(--jpg-border); border-radius: var(--jpg-radius); padding: 3rem; text-align: center; color: var(--jpg-text-muted); }
.jpg-empty-icon       { font-size: 2.5rem; margin: 0; }

/* Pagination */
.jpg-pagination          { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2rem; }
.jpg-pagination__btn     { padding: .5rem 1.125rem; background: #f1f5f9; color: var(--jpg-text-muted); border-radius: 7px; text-decoration: none; font-size: .875rem; }
.jpg-pagination__btn:hover { background: #e2e8f0; }
.jpg-pagination__info    { color: var(--jpg-text-muted); font-size: .875rem; }

/* ═══════════════════════════════════════════════════════════
   TEAM-SEKTION (single-integrated.php – Lerne dein Team)
═══════════════════════════════════════════════════════════ */

.jpg-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.jpg-team-card {
    background: var(--jpg-bg);
    border: 1px solid var(--jpg-border);
    border-radius: var(--jpg-radius);
    padding: 1.25rem;
    text-align: center;
}

.jpg-team-avatar__img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: .75rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.jpg-team-avatar--placeholder {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--jpg-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .75rem;
    font-size: 1.75rem;
}

.jpg-team-name  { font-weight: 700; font-size: .95rem; color: var(--jpg-text); }
.jpg-team-title { font-size: .82rem; color: var(--jpg-text-muted); margin-top: .2rem; }
.jpg-team-bio   { font-size: .82rem; color: var(--jpg-text-muted); margin: .6rem 0 0; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════
   APPLY DESCRIPTION BLOCK
═══════════════════════════════════════════════════════════ */
.jpg-apply-desc { margin-bottom: 1.25rem; }

/* ═══════════════════════════════════════════════════════════
   BEWERBUNGS-MODAL (single-integrated.php)
═══════════════════════════════════════════════════════════ */

.jpg-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* JS setzt display:flex zum Öffnen */

.jpg-modal__box {
    background: #fff;
    border-radius: 12px;
    max-width: 580px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.jpg-modal__header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--jpg-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.jpg-modal__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--jpg-text);
}

.jpg-modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--jpg-text-muted);
    line-height: 1;
    padding: 0;
}
.jpg-modal__close:hover { color: var(--jpg-text); }

.jpg-modal__banner {
    display: none;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid transparent;
    font-size: .9rem;
}
.jpg-modal__banner--success {
    background: #d1fae5;
    color: #065f46;
    border-bottom-color: #6ee7b7;
}
.jpg-modal__banner--error {
    background: #fef2f2;
    color: #991b1b;
    border-bottom-color: #fecaca;
}

.jpg-modal__form { padding: 1.5rem; }

/* Honeypot-Feld: komplett unsichtbar */
.jpg-honeypot {
    display: none;
    position: absolute;
    left: -9999px;
}

/* Formular-Felder */
.jpg-form-group             { margin-bottom: 1rem; }
.jpg-form-group--file       { margin-bottom: 1.5rem; }

.jpg-form-label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    color: var(--jpg-text);
    margin-bottom: .35rem;
}

.jpg-required { color: #ef4444; }

.jpg-form-input {
    width: 100%;
    padding: .65rem .85rem;
    border: 2px solid var(--jpg-border);
    border-radius: 6px;
    font-size: .95rem;
    box-sizing: border-box;
    font-family: inherit;
    color: var(--jpg-text);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.jpg-form-input:focus {
    outline: none;
    border-color: var(--jpg-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jpg-primary) 15%, transparent);
}

.jpg-form-textarea {
    resize: vertical;
    min-height: 120px;
}

.jpg-form-file {
    width: 100%;
    padding: .5rem 0;
    font-size: .9rem;
    font-family: inherit;
}

.jpg-form-hint { color: var(--jpg-text-muted); font-size: .8rem; }

/* Modal-Footer (Buttons) */
.jpg-modal__footer {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.jpg-modal__btn {
    padding: .65rem 1.25rem;
    border-radius: 6px;
    font-size: .9rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: background .15s;
}
.jpg-modal__btn--cancel {
    background: #f1f5f9;
    border: 1px solid var(--jpg-border);
    color: var(--jpg-text-muted);
}
.jpg-modal__btn--cancel:hover { background: #e2e8f0; }
.jpg-modal__btn--submit {
    background: var(--jpg-primary);
    color: #fff;
    border: none;
}
.jpg-modal__btn--submit:hover  { background: var(--jpg-primary-dark); }
.jpg-modal__btn--submit:disabled { opacity: .6; cursor: not-allowed; }

/* Datenschutz-Hinweis */
.jpg-modal__privacy {
    margin-top: 1rem;
    font-size: .78rem;
    color: #94a3b8;
    text-align: center;
}
.jpg-modal__privacy-link       { color: var(--jpg-text-muted); text-decoration: none; }
.jpg-modal__privacy-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   WHITELABEL: Firmenname-Zeile
═══════════════════════════════════════════════════════════ */
.wl-company-name {
    margin-bottom: 1rem;
    color: var(--jpg-text-muted);
    font-size: .9rem;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT: MODERN (single-modern.php)
   Full-Width Hero, kartenbasierte Sektionen
═══════════════════════════════════════════════════════════ */

.jpg-layout-modern { max-width: none; }

/* Hero */
.jpg-modern-hero {
    background: linear-gradient(135deg, var(--jpg-primary) 0%, var(--jpg-primary-dark) 100%);
    color: #fff;
    padding: 3.5rem 2rem 3rem;
    text-align: center;
}

.jpg-modern-hero__inner {
    max-width: 800px;
    margin: 0 auto;
}

.jpg-modern-hero__company {
    display: inline-block;
    background: rgba(255,255,255,.2);
    padding: .25rem .75rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 500;
    margin-bottom: .75rem;
    letter-spacing: .03em;
}

.jpg-modern-hero__title {
    font-family: var(--jpg-font-heading);
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 1rem;
    line-height: 1.2;
}

.jpg-modern-hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.jpg-modern-meta-chip {
    background: rgba(255,255,255,.18);
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 500;
    backdrop-filter: blur(4px);
}

.jpg-modern-hero__salary {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(255,255,255,.95);
    color: #065f46;
    padding: .5rem 1rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.jpg-btn-apply--hero {
    font-size: 1.05rem;
    padding: .85rem 2.5rem;
}

/* Cards */
.jpg-modern-content {
    max-width: 800px;
    margin: -1.5rem auto 0;
    padding: 0 1.5rem 2rem;
    position: relative;
}

.jpg-modern-card {
    background: var(--jpg-card-bg);
    border-radius: var(--jpg-radius);
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    padding: 1.75rem;
    margin-bottom: 1.25rem;
}

.jpg-modern-card h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--jpg-text);
    margin: 0 0 .75rem;
}

.jpg-modern-card h3 {
    font-size: .9rem;
    font-weight: 600;
    color: var(--jpg-text-muted);
    margin: .5rem 0 .25rem;
}

.jpg-modern-card p {
    font-size: .92rem;
    line-height: 1.7;
    color: var(--jpg-text-muted);
    margin: 0 0 .5rem;
}

.jpg-modern-card--cta {
    background: linear-gradient(135deg, var(--jpg-primary) 0%, var(--jpg-primary-dark) 100%);
    color: #fff;
    text-align: center;
    padding: 2rem;
}
.jpg-modern-card--cta h2,
.jpg-modern-card--cta p { color: #fff; }

/* Listen */
.jpg-modern-list {
    padding-left: 1.25rem;
    margin: 0;
}
.jpg-modern-list li {
    margin-bottom: .35rem;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--jpg-text);
}
.jpg-modern-list--nice li {
    color: var(--jpg-text-muted);
}

/* Benefits */
.jpg-modern-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .75rem;
}
.jpg-modern-benefit-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background: var(--jpg-bg);
    border-radius: 8px;
    font-size: .88rem;
}
.jpg-modern-benefit-icon { font-size: 1.1rem; }

/* Large Apply Button */
.jpg-btn-apply--large {
    font-size: 1rem;
    padding: .85rem 2.5rem;
    background: #fff;
    color: var(--jpg-primary);
    border: none;
    cursor: pointer;
    border-radius: 8px;
    font-weight: 700;
    transition: background .15s, transform .1s;
}
.jpg-btn-apply--large:hover {
    background: rgba(255,255,255,.9);
    transform: translateY(-1px);
}

/* Responsive Modern */
@media (max-width: 640px) {
    .jpg-modern-hero { padding: 2rem 1rem 1.5rem; }
    .jpg-modern-hero__title { font-size: 1.5rem; }
    .jpg-modern-content { padding: 0 1rem 1.5rem; margin-top: -1rem; }
    .jpg-modern-card { padding: 1.25rem; }
    .jpg-modern-benefits-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT: COMPACT (single-compact.php)
   Minimalistisch, zeitungsartig, einspaltig
═══════════════════════════════════════════════════════════ */

.jpg-layout-compact { max-width: 720px; }

.jpg-compact-article {
    background: var(--jpg-card-bg);
    border-radius: var(--jpg-radius);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    padding: 2rem 2.5rem;
}

/* Header */
.jpg-compact-header { margin-bottom: 1rem; }

.jpg-compact-company {
    font-size: .82rem;
    color: var(--jpg-text-muted);
    font-weight: 500;
    margin-bottom: .35rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.jpg-compact-title {
    font-family: var(--jpg-font-heading);
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--jpg-text);
    margin: 0 0 .5rem;
    line-height: 1.25;
}

.jpg-compact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    font-size: .85rem;
    color: var(--jpg-text-muted);
}

.jpg-compact-apply-inline { margin-top: 1rem; }

.jpg-compact-divider {
    border: none;
    border-top: 1px solid var(--jpg-border);
    margin: 1.25rem 0;
}

/* Sektionen */
.jpg-compact-section      { margin-bottom: 1.25rem; }
.jpg-compact-section h2   {
    font-size: 1rem;
    font-weight: 700;
    color: var(--jpg-primary);
    margin: 0 0 .5rem;
    padding-bottom: .25rem;
    border-bottom: 2px solid var(--jpg-primary);
}
.jpg-compact-section h3   {
    font-size: .88rem;
    font-weight: 600;
    color: var(--jpg-text-muted);
    margin: .75rem 0 .25rem;
}

.jpg-compact-lead {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--jpg-text);
    margin: 0 0 .5rem;
}

.jpg-compact-list {
    padding-left: 1.25rem;
    margin: 0;
}
.jpg-compact-list li {
    font-size: .9rem;
    line-height: 1.6;
    margin-bottom: .25rem;
}
.jpg-compact-list--light li { color: var(--jpg-text-muted); }

/* Benefits */
.jpg-compact-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.jpg-compact-benefit-chip {
    display: inline-block;
    background: var(--jpg-bg);
    border: 1px solid var(--jpg-border);
    padding: .3rem .65rem;
    border-radius: 999px;
    font-size: .82rem;
}

/* Apply fullwidth */
.jpg-compact-apply { text-align: center; }
.jpg-btn-apply--fullwidth {
    width: 100%;
    text-align: center;
    display: block;
    box-sizing: border-box;
}

/* Responsive Compact */
@media (max-width: 640px) {
    .jpg-compact-article { padding: 1.25rem 1rem; }
    .jpg-compact-title { font-size: 1.35rem; }
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT: SIDEBAR (single-sidebar.php)
   Content links, Sticky-Sidebar rechts mit CTA
═══════════════════════════════════════════════════════════ */

.jpg-layout-sidebar { max-width: 1100px; }

/* Header */
.jpg-sidebar-header {
    background: var(--jpg-card-bg);
    border-radius: var(--jpg-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
}

.jpg-sidebar-header__company {
    display: inline-block;
    font-size: .85rem;
    color: var(--jpg-text-muted);
    margin-bottom: .25rem;
}

.jpg-sidebar-header h1 {
    font-family: var(--jpg-font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    color: var(--jpg-text);
}

/* Two-Column Layout */
.jpg-sidebar-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: flex-start;
}

/* Main Content */
.jpg-sidebar-main { min-width: 0; }

/* Aside */
.jpg-sidebar-aside { min-width: 0; }

.jpg-sidebar-sticky {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* CTA Card */
.jpg-sidebar-cta-card {
    background: var(--jpg-card-bg);
    border: 2px solid var(--jpg-primary);
    border-radius: var(--jpg-radius);
    padding: 1.25rem;
    text-align: center;
}
.jpg-sidebar-cta-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .35rem;
    color: var(--jpg-text);
}
.jpg-sidebar-cta-card p {
    font-size: .85rem;
    color: var(--jpg-text-muted);
    margin: 0 0 .75rem;
}

/* Info Cards */
.jpg-sidebar-info-card {
    background: var(--jpg-card-bg);
    border: 1px solid var(--jpg-border);
    border-radius: var(--jpg-radius);
    padding: 1.25rem;
}
.jpg-sidebar-info-card h4 {
    font-size: .92rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    color: var(--jpg-text);
}

/* Salary */
.jpg-sidebar-salary {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--jpg-primary);
}
.jpg-sidebar-salary small {
    display: block;
    font-size: .78rem;
    font-weight: 400;
    color: var(--jpg-text-muted);
}

/* Benefits Grid */
.jpg-sidebar-benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}
.jpg-sidebar-benefit-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    padding: .35rem .5rem;
    background: var(--jpg-bg);
    border-radius: 6px;
}
.jpg-sidebar-benefit-icon { font-size: 1rem; }

/* Quick Facts */
.jpg-sidebar-facts {
    list-style: none;
    padding: 0;
    margin: 0;
}
.jpg-sidebar-facts li {
    padding: .4rem 0;
    font-size: .85rem;
    border-bottom: 1px solid var(--jpg-border);
}
.jpg-sidebar-facts li:last-child { border-bottom: none; }
.jpg-sidebar-facts strong {
    display: inline-block;
    min-width: 90px;
    color: var(--jpg-text-muted);
    font-weight: 600;
}

/* Responsive Sidebar */
@media (max-width: 768px) {
    .jpg-sidebar-layout {
        grid-template-columns: 1fr;
    }
    .jpg-sidebar-sticky {
        position: static;
    }
    .jpg-sidebar-benefits-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .jpg-sidebar-header { padding: 1rem 1.25rem; }
    .jpg-sidebar-header h1 { font-size: 1.3rem; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE (ergänzend)
═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .jpg-job-card-list           { flex-direction: column; }
    .jpg-job-card-list__action   { width: 100%; }
    .jpg-btn                     { display: block; text-align: center; }
    .jpg-filter-input,
    .jpg-filter-select           { min-width: 100%; flex: none; }
    .jpg-team-grid               { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    /* Grid-Kacheln auf Mobil einspaltig */
    .jpg-jobs-list__grid--grid   { grid-template-columns: 1fr; }
}