/* =====================================================================
   WeVo - Dynamische Job-Seiten (additiv zum bestehenden styles.css).
   Bewusst klein gehalten, nutzt bestehende Token soweit moeglich.
   ===================================================================== */

:root {
  --wv-green:     #00733b;
  --wv-green-d:   #005c2f;
  --wv-l-green:   #c8e8d6;
  --wv-sky:       #5b94c7;
  --wv-sand:      #f2eee5;
  --wv-text:      #1a2226;
  --wv-muted:     #5d6770;
  --wv-border:    #e1e5e8;
  --wv-radius:    12px;
  --wv-shadow:    0 2px 8px rgba(20,30,40,.06);
  --wv-shadow-h:  0 10px 28px rgba(20,30,40,.12);
  /* Hoehe des fixed-Headers aus styles.css - in einer Variablen,
     damit alle dynamischen Seiten den gleichen Offset nutzen. */
  --wv-header-h:  130px;
}

/* Fix-Header-Setup fuer dynamische Seiten:
   1. Header wird *erzwungen* fixed (falls styles.css aus irgendeinem
      Grund nicht greift oder ueberschrieben wird).
   2. Body bekommt entsprechendes Top-Padding, damit der Content nicht
      vom schwebenden Header verdeckt wird. */
body.has-fixed-header #header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9991 !important;
}
body.has-fixed-header { padding-top: var(--wv-header-h); }
@media (max-width: 1200px) { body.has-fixed-header { padding-top: 100px; } }
@media (max-width: 900px)  { body.has-fixed-header { padding-top: 80px;  } }
@media (max-width: 600px)  { body.has-fixed-header { padding-top: 70px;  } }

/* Container und Hero */
.jobs-container { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }

/* Hero auf der Karriere-Uebersicht. body.has-fixed-header sorgt dafuer,
   dass der fixed Header nicht ueberdeckt - hier nur normales Padding. */
.jobs-hero {
    background:
      linear-gradient(135deg, rgba(0,115,59,.85), rgba(91,148,199,.7)),
      url('../image/leistung/wevo-tiefbau.jpg') center/cover no-repeat;
    color: #fff;
    padding: 3rem 0;
    position: relative;
}
.jobs-hero__inner { max-width: 900px; margin: 0 auto; padding: 0 1.25rem; }
.jobs-hero .kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; opacity: .9; margin: 0 0 .5rem; }
.jobs-hero h1 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); line-height: 1.15; margin: 0 0 1rem; }
.jobs-hero h1 span { display: block; opacity: .92; font-weight: 400; }
.jobs-hero .lead { font-size: 1.05rem; max-width: 620px; line-height: 1.55; }

/* Breadcrumb */
.breadcrumb { background: var(--wv-sand); border-bottom: 1px solid var(--wv-border); padding: .75rem 0; font-size: .9rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: '›'; margin-left: .35rem; color: var(--wv-muted); }
.breadcrumb a { color: var(--wv-green-d); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Filter */
.jobs-section { padding: 3rem 0; background: #fff; }
.jobs-filter {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: flex-end;
    background: var(--wv-sand);
    padding: 1rem 1.25rem;
    border-radius: var(--wv-radius);
    margin-bottom: 2rem;
}
.jobs-filter label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; color: var(--wv-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.jobs-filter select {
    font: inherit; padding: .55rem .75rem; min-width: 220px;
    border: 1px solid var(--wv-border); border-radius: 8px; background: #fff;
}
.jobs-filter__reset { color: var(--wv-green-d); font-weight: 600; }

/* Karten-Grid */
.jobs-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.job-card {
    background: #fff; border: 1px solid var(--wv-border);
    border-radius: var(--wv-radius); box-shadow: var(--wv-shadow);
    overflow: hidden; transition: transform .15s ease, box-shadow .15s ease;
}
.job-card:hover { transform: translateY(-2px); box-shadow: var(--wv-shadow-h); }
.job-card__link { display: block; padding: 1.5rem; color: var(--wv-text); text-decoration: none; }
.job-card__link:hover { text-decoration: none; }
.job-card__title { font-size: 1.15rem; line-height: 1.3; margin: 0 0 .75rem; color: var(--wv-text); }
.job-card__suffix { color: var(--wv-muted); font-weight: 400; }
.job-card__meta {
    list-style: none; padding: 0; margin: 0 0 1rem;
    display: flex; flex-wrap: wrap; gap: .35rem .65rem;
    font-size: .85rem;
}
.job-card__meta li {
    background: var(--wv-sand); padding: .15rem .65rem; border-radius: 999px;
    color: var(--wv-text);
}
.job-card__meta li.meta--location   { background: #e8f1fb; color: #0d3b66; }
.job-card__excerpt { color: var(--wv-muted); font-size: .92rem; margin: 0 0 1.25rem; }
.job-card__cta { color: var(--wv-green); font-weight: 700; }

.jobs-empty {
    background: var(--wv-sand); border-radius: var(--wv-radius);
    padding: 2rem; text-align: center; color: var(--wv-muted);
}

.jobs-initiative {
    margin-top: 3rem; padding: 2rem; text-align: center;
    background: var(--wv-l-green);
    border-radius: var(--wv-radius);
}
.jobs-initiative h3 { font-size: 1.3rem; color: var(--wv-green-d); margin-bottom: .5rem; }
.jobs-initiative p { margin: 0 auto 1.25rem; max-width: 640px; }
.jobs-initiative__btn { margin-top: .5rem; display: inline-block; }

/* Detail-Layout */
.job-detail { padding: 2.5rem 0 4rem; background: #fff; }
.job-detail__grid {
    display: grid; gap: 2.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .job-detail__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .job-detail__head { grid-column: 1 / -1; }
}
.job-detail__head { border-bottom: 2px solid var(--wv-l-green); padding-bottom: 1.5rem; }
.job-detail .kicker { text-transform: uppercase; letter-spacing: .12em; color: var(--wv-green); font-weight: 600; margin: 0 0 .25rem; }
.job-detail__title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .75rem; line-height: 1.2; }
.job-detail__title small { font-weight: 400; color: var(--wv-muted); }
.job-detail__meta {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.job-detail__meta li { background: var(--wv-sand); padding: .25rem .75rem; border-radius: 999px; font-size: .9rem; }

.job-block { margin-bottom: 1.75rem; }
.job-block h2 { font-size: 1.2rem; color: var(--wv-green-d); margin: 0 0 .75rem; }
.job-block ul { padding-left: 1.25rem; margin: 0; }
.job-block ul li { margin-bottom: .35rem; line-height: 1.55; }
.job-block--intro p { font-size: 1.05rem; color: var(--wv-text); }
.job-block--closing p { color: var(--wv-muted); font-style: italic; }

.job-detail__cta-wrap { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.btn-outline {
    display: inline-block; padding: .65rem 1.2rem;
    border: 2px solid var(--wv-green); color: var(--wv-green);
    border-radius: 8px; text-decoration: none; font-weight: 700;
}
.btn-outline:hover { background: var(--wv-green); color: #fff; }

/* Sidebar */
.job-detail__aside { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-card, .apply-card {
    background: var(--wv-sand);
    border: 1px solid var(--wv-border);
    border-radius: var(--wv-radius);
    padding: 1.5rem;
}
.contact-card h3, .apply-card h3 { margin: 0 0 .75rem; font-size: 1rem; color: var(--wv-green-d); text-transform: uppercase; letter-spacing: .05em; }
.contact-card__photo {
    width: 96px; height: 96px; object-fit: cover; border-radius: 50%;
    margin-bottom: .75rem; display: block;
}
.contact-card__name { font-weight: 700; margin: 0; }
.contact-card__role { color: var(--wv-muted); margin: 0 0 .5rem; }
.contact-card p { margin: .25rem 0; }
.apply-card__email a { color: var(--wv-green-d); font-weight: 600; }

.preview-banner {
    background: #fff3cd; color: #856404; text-align: center;
    padding: .75rem; font-weight: 600; border-bottom: 1px solid #ffeeba;
}