/* ——— JOB-DETAILSEITE (Stellenanzeige) ——— */
.job-detail {
  padding: 16px 56px 80px;
  display: grid;
  grid-template-columns: 1fr 0.62fr;
  gap: 16px;
  align-items: start;
}

.job-main {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 0 var(--side-round) var(--side-round) 0;
  padding: 56px;
}
.job-main .card-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.job-main h2 { font-size: clamp(20px, 2vw, 24px); font-weight: 800; letter-spacing: -0.02em; margin-top: 40px; }
.job-main section:first-of-type h2 { margin-top: 24px; }
.job-main p { font-size: 15px; line-height: 1.7; color: #444; margin-top: 14px; }
.job-main ul { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.job-main li {
  list-style: none;
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; line-height: 1.55; color: #333;
}
.job-main li::before {
  content: "";
  flex-shrink: 0; margin-top: 6px;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent);
}
.job-main p em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

/* ——— Icon-Liste (Aufgaben / Anforderungen) im Vorteile-Look ——— */
.job-main .job-icon-list {
  margin-top: 18px;
  gap: 18px;
}
.job-main li.job-icon-item {
  align-items: center;
  gap: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: #333;
}
.job-main li.job-icon-item::before { content: none; }
.job-icon-item .job-benefit-icon { flex-shrink: 0; }
.job-icon-item-text strong { color: var(--ink); }

/* ——— Aufgaben als Chat-artige Sprechblasen ——— */
.task-chat {
  margin-top: 16px !important;
  gap: 12px !important;
}
.task-chat .task-bubble {
  list-style: none;
  display: block;
  align-items: unset;
  gap: 0;
  max-width: 78%;
  background: var(--canvas);
  border-radius: 4px 18px 18px 18px;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.55;
  color: #333;
}
.task-chat .task-bubble::before { content: none; }
.task-chat .task-bubble strong { color: var(--ink); }
.task-chat .task-bubble:nth-child(odd) {
  margin-right: auto;
}
.task-chat .task-bubble:nth-child(even) {
  margin-left: auto;
  background: rgba(75, 112, 133, 0.08);
  border: 1px solid rgba(75, 112, 133, 0.18);
  border-radius: 18px 4px 18px 18px;
}

/* ——— Vorteile-Kacheln innerhalb der Stellenbeschreibung ——— */
.job-benefits {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #e5e6e8;
  border-left: 1px solid #e5e6e8;
  border-radius: 18px;
  overflow: hidden;
}
.job-benefit {
  padding: 22px 20px;
  border-right: 1px solid #e5e6e8;
  border-bottom: 1px solid #e5e6e8;
}
.job-benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #dcdee1;
  border-radius: 10px;
  color: var(--accent);
}
.job-benefit-icon svg { width: 18px; height: 18px; }
.job-benefit h3 { margin-top: 14px; font-size: 14px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.35; }
.job-benefit p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* align-self: stretch statt dem geerbten "start" – die Seitenspalte
   soll so hoch wie der (deutlich längere) Haupttext werden, damit der
   sticky Block über die ganze Artikellänge gültig bleibt und nicht
   vorzeitig ausklinkt. */
.job-side { align-self: stretch; display: flex; flex-direction: column; gap: 16px; }
/* Der gesamte Block (Kurzüberblick, Bewerben-CTA, weitere Stellen)
   klebt beim Scrollen zusammen fest. top ist um die Höhe des fixierten
   Headers (84px) plus Abstand versetzt, damit "Auf einen Blick" nicht
   dahinter verschwindet. */
.job-side-sticky {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.job-facts {
  background: var(--canvas);
  border-radius: var(--side-round) 0 0 var(--side-round);
  padding: 40px;
}
.job-facts h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.job-fact-list { margin-top: 20px; display: flex; flex-direction: column; }
.job-fact {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid #e2e4e7;
}
.job-fact:last-child { border-bottom: 0; }
.job-fact span:first-child { font-size: 13px; color: var(--muted); }
.job-fact span:last-child { font-size: 14px; font-weight: 700; text-align: right; }

.job-apply {
  background: var(--accent);
  color: #fff;
  border-radius: 0 var(--side-round) var(--side-round) 0;
  padding: 40px;
  text-align: left;
}
.job-apply h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.job-apply p { margin-top: 10px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.85); }
.job-apply .btn { margin-top: 18px; }
.job-apply .btn-light { width: 100%; justify-content: center; }
.job-apply__phone { display: block; margin-top: 14px; font-size: 15px; color: rgba(255,255,255,.85); text-decoration: none; }
.job-apply__phone strong { color: #fff; font-size: 15px; }

/* ——— "Weitere offene Stellen": Akkordeon-Liste, die auf beliebig viele
   weitere Vakanzen skaliert. Sie folgt dem sticky Block, scrollt aber
   normal mit statt selbst zu kleben. Jeder Eintrag ist standardmäßig
   eingeklappt, öffnet sich per Klick (immer nur einer gleichzeitig) und
   klappt beim Scrollen automatisch wieder zu (siehe job-accordion.js). ——— */
.job-other {
  background: var(--card);
  border: 1px solid #ececec;
  border-radius: var(--side-round) 0 0 var(--side-round);
  padding: 28px 32px;
}
.job-other-list { margin-top: 14px; display: flex; flex-direction: column; }
.job-other-item { border-top: 1px solid #ececec; }
.job-other-item:first-child { border-top: 0; }
.job-other-item__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.job-other-item__num { flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--muted); }
.job-other-item__title { flex: 1; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; }
.job-other-item__title em { font-style: normal; font-weight: 600; color: var(--muted); }
.job-other-item__mark {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 7px 0 7px 0;
  border: 1px solid #ddd;
  color: #888;
  display: grid; place-items: center;
  font-size: 15px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.job-other-item__body {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .3s ease, opacity .25s ease, padding .25s ease;
  padding: 0;
}
.job-other-item.is-open .job-other-item__body { max-height: 240px; opacity: 1; padding: 0 0 18px; }
.job-other-item.is-open .job-other-item__mark { background: var(--accent); color: #fff; border-color: var(--accent); }
.job-other-item__body p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.job-other-item__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; font-size: 13px; font-weight: 700;
  color: var(--accent); text-decoration: none;
}
.job-other-item__link:hover { text-decoration: underline; }

/* ——— Abschluss-CTA zwischen Stellendetail und FAQ ——— */
.page-cta { padding: 0 56px 24px; }
.page-cta-inner {
  background: var(--accent);
  color: #fff;
  border-radius: 0 var(--side-round) var(--side-round) 0;
  padding: 48px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.page-cta-text { flex: 1; min-width: 280px; }
.page-cta .card-label { color: rgba(255,255,255,.8); }
.page-cta h2 {
  margin-top: 8px;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  max-width: 46ch;
}
.page-cta-text p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.85); max-width: 54ch; }
.page-cta .btn-light { flex-shrink: 0; }

@media (max-width: 960px) {
  .job-detail { grid-template-columns: 1fr; padding: 16px 20px 56px; }
  .job-main { border-radius: 0 28px 28px 0; padding: 32px 24px; }
  .job-benefits { grid-template-columns: repeat(2, 1fr); }
  .job-side-sticky { position: static; }
  .job-facts { border-radius: 28px 0 0 28px; padding: 28px 24px; }
  .job-apply { border-radius: 0 28px 28px 0; padding: 28px 24px; }
  .job-other { border-radius: 28px 0 0 28px; padding: 22px 20px; }
  .page-cta { padding: 0 20px 20px; }
  .page-cta-inner { padding: 28px 24px; border-radius: 0 28px 28px 0; }
}

@media (max-width: 560px) {
  .job-benefits { grid-template-columns: 1fr; }
  .task-chat .task-bubble { max-width: 92%; }
}