/* ============================================================
   jobs.css – seitenspezifisch für jobs.blumen-wendler.de
   ============================================================
   Das Formular-CSS steckt jetzt in wendler-forms.css.
   Hier bleibt NUR, was es genau einmal gibt – auf dieser Seite:
   schlanker Jobs-Hero, Stellen-Kacheln, Perks, Kontaktblock.

   Ladereihenfolge auf der Seite:
     wendler.css → wendler-forms.css → wendler-cmyk.css → jobs.css
   ============================================================ */

/* ── JOBS-HERO (schlanker/linksbündig statt großem CMYK-Hero) ─ */
.jobs-hero {
  position: relative;
  padding: 140px var(--pad) 80px;
  background: linear-gradient(160deg, #1a2e10 0%, #2d4a1a 40%, #1f3a14 100%);
  color: #fff; overflow: hidden;
}
.jobs-hero-inner { max-width: var(--max); margin: 0 auto; }
.jobs-hero .eyebrow { color: var(--green-200); display: inline-block; margin-bottom: 18px; }
.jobs-hero h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px, 6vw, 68px);
  line-height: 1.04; letter-spacing: -0.01em;
  max-width: 16ch; margin-bottom: 20px;
}
.jobs-hero h1 em { font-style: normal; color: var(--green-200); }
.jobs-hero-sub {
  font-size: 18px; font-weight: 300; line-height: 1.65;
  color: rgba(255,255,255,0.85); max-width: 52ch; margin-bottom: 36px;
}
.jobs-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── SECTION-RAHMEN ─────────────────────────────────────────── */
.jobs-section { padding: 88px var(--pad); background: var(--bg); }
.jobs-section--alt { background: var(--bg-section); }
.jobs-section-inner { max-width: var(--max); margin: 0 auto; }
.jobs-section h2.section-title { margin-bottom: 36px; }

/* ── STELLEN-KACHELN (nutzen .card aus wendler.css) ─────────── */
.jobs-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.job-card { display: flex; flex-direction: column; position: relative; overflow: hidden; }

/* Hover-Akzentstrich: fährt von links ein (wie service-/standort-card) */
.job-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s ease;
}
.job-card:hover::before { transform: scaleX(1); }

.job-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ink); }

/* Chips (Tags) statt Meta-Textzeile */
.job-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--green); color: #fff;
  line-height: 1.4;
}

.job-card p { font-size: 15px; color: var(--fg-muted); font-weight: 300; flex: 1; margin-bottom: 22px; }
.job-card-link { align-self: flex-start; font-weight: 600; font-size: 15px; color: var(--green-dark); text-decoration: none; }
.job-card-link:hover { text-decoration: underline; }
.job-card--open { background: var(--green-50); }

/* ── PERKS (Warum bei uns) ──────────────────────────────────── */
.perks-grid { display: grid; gap: 28px; grid-template-columns: repeat(4, 1fr); }
.perk-no { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--green); opacity: 0.55; }
.perk h3 { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin: 8px 0 6px; color: var(--ink); }
.perk p { font-size: 15px; color: var(--fg-muted); font-weight: 300; }

/* ── KONTAKTBLOCK ───────────────────────────────────────────── */
.jobs-contact { text-align: center; max-width: 680px; margin: 0 auto; }
.jobs-contact .contact-names { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--ink); margin-bottom: 10px; }
.jobs-contact .contact-addr { color: var(--fg-muted); font-weight: 300; margin-bottom: 24px; }
.jobs-contact .contact-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .jobs-grid { grid-template-columns: 1fr; }
  .perks-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .jobs-hero { padding: 110px var(--pad) 60px; }
  .jobs-hero-btns { flex-direction: column; }
  .jobs-hero-btns .btn { width: 100%; }
  .perks-grid { grid-template-columns: 1fr; }
}