/* ==========================================================================
   DP Jobs (jobs) – CSS 1:1 uebernommen aus
   imbrot/wp-content/themes/dp-core/css/{vc-elements,custom,responsive}.css
   Reihenfolge wie im Theme (style.css: vc-elements -> custom -> responsive).
   ========================================================================== */

/* --- aus css/vc-elements.css --- */

.jobs-list { margin-top: 40px; }

.job-item { border-top: 1px solid #d9d9d9; }

.job-item:last-child { border-bottom: 1px solid #d9d9d9; }

.job-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 30px 0 20px;
    color: inherit;
    text-decoration: none;
}

.job-item .job-title-wrapper { flex: 1; }

.job-item .job-title {
    margin: 0;
    font-size: 2.2em;
}

.job-item .post-meta {
    display: flex;
    flex: 1.5;
    align-items: center;
    gap: 40px;
    color: var(--dark-grey);
    font-size: 0.9em;
}

.job-item .post-meta p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    white-space: nowrap;
}

.job-item .post-meta .location-icon,
.job-item .post-meta .date-icon,
.job-item .post-meta .time-icon {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}

.job-item .post-meta .location-icon path,
.job-item .post-meta .date-icon path,
.job-item .post-meta .time-icon path,
.job-item .post-meta .date-icon rect,
.job-item .post-meta .time-icon circle,
.job-item .post-meta .time-icon polyline {
    fill: var(--dark-grey);
    stroke: var(--dark-grey);
}

.job-item .text-link.arrow { flex: 0 0 auto; }

/* Original aus dem Theme war hier:
   .job-item a:hover .job-title { font-style: italic; }
   Ersetzt durch die Faerbung auf die Primary Color – siehe Block
   "ANPASSUNGEN" am Ende der Datei. */

.job-item a:hover .text-link:after { display: none; }

.job-item a:hover .text-link.arrow .btn-icon {
    transform: translate(170%, -170%);
    transition: transform .4s ease-in-out;
}

.job-item a:hover .text-link.arrow .btn-icon.clone {
    transform: translate(0, 0);
    transition-delay: .2s;
}

/* --- aus css/custom.css --- */

.jobs {
    border-radius: 15px;
    padding: 5%;
}

#jobs .vc_column_container>.vc_column-inner,
#quality .vc_column_container>.vc_column-inner {
    padding: 0 !important;
}

/* --- aus css/responsive.css --- */

@media (max-width: 1200px) {
    .job-item .job-title {
            margin: 0;
            font-size: 1.6em;
        }
}

@media (max-width: 1024px) {
    .job-item a {
            position: relative;
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
            padding-right: 48px;
        }
    
    .job-item .post-meta {
            flex-wrap: wrap;
            gap: 0px 20px;
        }
    
    .job-item .text-link.arrow {
            position: absolute;
            top: 25px;
            right: 0;
            align-self: auto;
            margin-top: 0 !important;
        }
}

@media (max-width: 991px) {
    .job-image { padding-top: 5%; }
    
    #job-intro.vc_row.section,
        #job-intro.section {
            padding-top: 60px !important;
            padding-bottom: 0 !important;
        }
    
    #job-intro .job-image {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            max-width: 400px !important;
            margin-right: auto;
            margin-left: 0;
            text-align: left;
        }
    
    #job-intro .job-image .wpb_wrapper,
        #job-intro .job-image .wpb_single_image,
        #job-intro .job-image .vc_single_image-wrapper,
        #job-intro .job-image img {
            margin-right: auto !important;
            margin-left: 0 !important;
            text-align: left;
        }
}

@media (max-width: 767px) {
    #job.section,
        #job.vc_row.section,
        #job.vc_section.section,
        #job section.section,
        #datenschutz.section,
        #datenschutz.vc_row.section,
        #datenschutz.vc_section.section,
        #datenschutz section.section {
            padding-left: 0px !important;
        }
    
    .jobs-list { margin-top: 10px; }
}

@media (max-width: 540px) {
    .job-item .text-link.arrow { display: none !important; }
}


/* ==========================================================================
   ANPASSUNGEN – nicht aus dem Theme uebernommen
   --------------------------------------------------------------------------
   Die dp-core-Themes laden ihre style.css per <link> in der header.php, also
   NACH wp_head() und damit nach dem Plugin-CSS. Theme-Regeln wie
   "a { text-decoration: underline }" gewinnen sonst. Deshalb sind die
   folgenden Regeln bewusst hoeher spezifiziert (.jobs-list .job-item ...).

   Farbe und Staerke der Trennlinie lassen sich pro Projekt setzen:
       :root { --dp-jobs-line: #d9d9d9; --dp-jobs-line-width: 1px; }
   ========================================================================== */

.jobs-list .job-item {
    border-top: var(--dp-jobs-line-width, 1px) solid var(--dp-jobs-line, #1a1a1a);
}

.jobs-list .job-item:last-child {
    border-bottom: var(--dp-jobs-line-width, 1px) solid var(--dp-jobs-line, #1a1a1a);
}

/* Kein Unterstrich auf der ganzen Kachel */
.jobs-list .job-item > a,
.jobs-list .job-item > a:hover,
.jobs-list .job-item > a:focus {
    text-decoration: none;
}

/* Jobtitel etwas kraeftiger als der Fliesstext, aber nicht fett.
   Keine font-family hier – die Schrift kommt vom Theme. */
.jobs-list .job-item .job-title {
    font-weight: 600;
    line-height: 1.15;
    text-decoration: none;
}

/* Textzeile unter dem Titel (Excerpt, z. B. "20-36 Stunden / Woche") */
.jobs-list .job-item .job-excerpt {
    margin: 6px 0 0;
    font-size: 0.95em;
    font-weight: 400;
    line-height: 1.3;
    opacity: 0.7;
    text-decoration: none;
}

/* Hover: Titel faerbt sich auf die Primary Color (statt kursiv wie im Theme) */
.jobs-list .job-item > a:hover .job-title {
    color: var(--primary-color);
}