/* ============================================================
   CAREERS — candidates (sections lab, group JB)
   Components under .job-*. Tokens only; every other value is a knob
   declared on its component. The section root never paints a
   background: the page view sets its ground (data-band).
   ============================================================ */

/* ---- JB01 · between process and code ----
   <section class="job-axis"><div class="wrap">
     <div class="job-axis__head"><div> .eyebrow · h2 </div>
       <div class="job-axis__intro"> p.job-axis__claim · p · .link </div></div>
     <div class="job-axis__scale">
       <p class="job-axis__ends"><span class="job-axis__end">Fachlichkeit</span><span class="job-axis__mid">Aktuell offen · drei Stellen</span><span class="job-axis__end job-axis__end--b">Technik</span></p>
       <ol class="job-axis__roles">
         <li class="job-axis__role" style="--at:3">                   ← column (of --axis-cols) where it stands
           <a class="job-axis__link" href="…"><span class="job-axis__mark"></span> .job-axis__t · .job-axis__meta · .job-axis__p · .job-axis__go(.arrow) </a>
         </li> × 2–4
       </ol>
     </div>
     <p class="job-axis__foot">… <a class="link">Initiativ bewerben<span class="arrow"></span></a></p>
   </div></section>
   The axis is the list's top rule; each role hangs from a marker on it.
   Phones: the axis turns vertical down the left edge, ends above and below. */
.job-axis {
  --axis-line: color-mix(in srgb, var(--fg) 32%, transparent);
  --axis-mark: 13px;
  --axis-cols: 50;          /* the line's resolution */
  --axis-span: 13;          /* columns a role's text may take */
  --axis-title: calc(var(--fs-h3) * 1.2);
}
.job-axis__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); align-items: end; }
.job-axis__head > div:first-child { grid-column: 1 / span 6; }
.job-axis__head h2 { text-wrap: balance; }
.job-axis__intro { grid-column: 8 / -1; }
.job-axis__intro > p + p { margin-top: var(--sp-4); }
.job-axis__intro p { text-wrap: pretty; }
.job-axis__claim {
  font-family: var(--font-head); font-weight: 500; font-stretch: 100%;
  font-size: calc(var(--fs-h3) * 1.15); line-height: 1.3; color: var(--fg);
}
.job-axis__intro .link { margin-top: var(--sp-4); }
.job-axis__scale { margin-top: var(--sp-9); }
.job-axis__ends {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  max-width: none; padding-bottom: var(--sp-4);
  font-size: var(--fs-small); color: var(--fg-dim);
}
.job-axis__mid { color: var(--fg); font-weight: 600; }
.job-axis__roles {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--axis-cols), minmax(0, 1fr));
  border-top: 1px solid var(--axis-line);
}
/* end ticks, so the rule reads as a scale */
.job-axis__roles::before, .job-axis__roles::after {
  content: ""; position: absolute; top: -7px; width: 1px; height: 13px; background: var(--axis-line);
}
.job-axis__roles::before { left: 0; }
.job-axis__roles::after { right: 0; }
.job-axis__role { grid-row: 1; grid-column: calc(var(--at) + 1) / span var(--axis-span); }
.job-axis__link { position: relative; display: grid; gap: var(--sp-1); padding-top: var(--sp-6); color: var(--fg); text-decoration: none; }
.job-axis__link::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: var(--sp-5); background: var(--axis-line); }
.job-axis__mark {
  position: absolute; left: calc(var(--axis-mark) / -2 + .5px); top: calc(var(--axis-mark) / -2 - .5px);
  width: var(--axis-mark); height: var(--axis-mark); border-radius: 50%;
  border: 1px solid var(--fg); background: var(--bg);
  transition: background-color .3s var(--ease-out);
}
.job-axis__t {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--axis-title); line-height: 1.2; letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance;
}
.job-axis__meta { font-size: var(--fs-small); color: var(--fg-dim); }
.job-axis__p { color: var(--fg-muted); text-wrap: pretty; }
.job-axis__go { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-3); font-weight: 600; }
.job-axis__link:focus-visible { outline-offset: 8px; }
.job-axis__link:focus-visible .job-axis__mark { background: var(--fg); }
.job-axis__link:focus-visible .arrow::before { transform: translateX(170%); }
.job-axis__link:focus-visible .arrow::after { transform: none; }
@media (hover: hover) {
  .job-axis__link:hover .job-axis__mark { background: var(--fg); }
  .job-axis__link:hover .arrow::before { transform: translateX(170%); }
  .job-axis__link:hover .arrow::after { transform: none; }
}
.job-axis__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-8); max-width: none; color: var(--fg-muted); }

/* ---- JB02 · positions, each with its workplace ----
   <section class="job-rows"><div class="wrap job-rows__grid">
     <div class="job-rows__head"> .eyebrow · h2 </div>
     <div class="job-rows__intro"> p.job-rows__claim · p </div>
     <div class="job-rows__stage" aria-hidden="true"><div class="photo job-rows__frame"><img class="is-on" alt="" …> …</div></div>
     <div class="job-rows__body">
       <p class="job-rows__count">Aktuell offen <span>3</span></p>
       <ul class="job-rows__list"><li><a class="job-rows__row" href="…" data-i="1"> .job-rows__t · .job-rows__meta · .job-rows__p · .arrow </a></li> × n (+ the open application)</ul>
       <p class="job-rows__reach">…</p>
     </div>
   </div></section>
   The stacked photos crossfade to the pointed-at row's workplace (JS keeps
   one .is-on); image 0 is the team, shown at rest. */
.job-rows { --rows-fade: .6s; --rows-title: calc(var(--fs-h3) * 1.2); }
.job-rows__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); }
.job-rows__head { grid-column: 1 / span 6; grid-row: 1; align-self: end; }
.job-rows__head h2 { text-wrap: balance; }
.job-rows__intro { grid-column: 8 / -1; grid-row: 1; align-self: end; }
.job-rows__intro p + p { margin-top: var(--sp-4); }
.job-rows__intro p { text-wrap: pretty; }
.job-rows__claim {
  font-family: var(--font-head); font-weight: 500; font-stretch: 100%;
  font-size: calc(var(--fs-h3) * 1.15); line-height: 1.3; color: var(--fg);
}
.job-rows__body { grid-column: 1 / span 6; grid-row: 2; margin-top: var(--sp-9); }
.job-rows__stage { grid-column: 8 / -1; grid-row: 2; align-self: start; margin-top: var(--sp-9); position: sticky; top: var(--sp-8); }
.job-rows__frame img { opacity: 0; transition: opacity var(--rows-fade) var(--ease-out); }
.job-rows__frame img.is-on { opacity: 1; }
.job-rows__count { display: flex; gap: var(--sp-2); padding-bottom: var(--sp-3); font-size: var(--fs-small); color: var(--fg-dim); }
.job-rows__count span { color: var(--fg); font-variant-numeric: tabular-nums; }
.job-rows__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hairline); }
.job-rows__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-5); row-gap: 2px;
  padding-block: var(--sp-5); border-top: 1px solid var(--hairline); color: var(--fg); text-decoration: none;
}
.job-rows__list li:first-child .job-rows__row { border-top-color: var(--hairline); }
.job-rows__t {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--rows-title); line-height: 1.2; letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance;
}
.job-rows__meta { font-size: var(--fs-small); color: var(--fg-dim); }
.job-rows__p { margin-top: var(--sp-2); color: var(--fg-muted); text-wrap: pretty; }
.job-rows__row > :not(.arrow) { grid-column: 1; }
.job-rows__row .arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; color: var(--fg-dim); transition: color .3s; }
.job-rows__row[data-on="true"] .arrow, .job-rows__row:focus-visible .arrow { color: var(--fg); }
.job-rows__row:focus-visible { outline-offset: -2px; }
.job-rows__row:focus-visible .arrow::before { transform: translateX(170%); }
.job-rows__row:focus-visible .arrow::after { transform: none; }
@media (hover: hover) {
  .job-rows__row:hover .arrow { color: var(--fg); }
  .job-rows__row:hover .arrow::before { transform: translateX(170%); }
  .job-rows__row:hover .arrow::after { transform: none; }
}
.job-rows__reach { margin-top: var(--sp-6); color: var(--fg-muted); }

/* ---- JB03 · apply without a cover letter ----
   <section class="job-apply"><div class="wrap job-apply__grid">
     <div class="job-apply__intro"> .eyebrow · h2 · p.job-apply__claim · p · p.job-apply__count
       <ul class="job-apply__open"><li> p.job-apply__t · p.job-apply__meta · p.job-apply__p · a.link[data-pick] </li> × n</ul></div>
     <div class="job-apply__side" id="JB03-form"> h3.job-apply__h · ul.job-apply__promise
       <form class="form job-apply__form"> fieldset.pills · .field × 2 · .upload · .consent · button.btn--accent </form>
       p.job-apply__alt </div>
   </div></section>
   The kit's form, unchanged; the first question is the position, and each
   role's "apply" link picks it (JS). */
.job-apply { --apply-title: calc(var(--fs-h3) * 1.1); }
.job-apply__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); }
.job-apply__intro { grid-column: 1 / span 6; }
.job-apply__intro h2 { text-wrap: balance; }
.job-apply__claim {
  margin-top: var(--sp-6);
  font-family: var(--font-head); font-weight: 500; font-stretch: 100%;
  font-size: calc(var(--fs-h3) * 1.15); line-height: 1.3; color: var(--fg);
}
.job-apply__claim + p { margin-top: var(--sp-3); text-wrap: pretty; }
.job-apply__count { display: flex; gap: var(--sp-2); margin-top: var(--sp-8); padding-bottom: var(--sp-3); font-size: var(--fs-small); color: var(--fg-dim); }
.job-apply__count span { color: var(--fg); font-variant-numeric: tabular-nums; }
.job-apply__open { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hairline); }
.job-apply__open li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-5); row-gap: 2px;
  padding-block: var(--sp-4); border-top: 1px solid var(--hairline);
}
.job-apply__open li > p { grid-column: 1; }
.job-apply__t { font-family: var(--font-head); font-weight: 600; font-stretch: 100%; font-size: var(--apply-title); line-height: 1.3; color: var(--fg); }
.job-apply__meta { font-size: var(--fs-small); color: var(--fg-dim); }
.job-apply__p { margin-top: var(--sp-1); }
.job-apply__open .link { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: var(--fs-small); }
.job-apply__side { grid-column: 8 / -1; align-self: start; scroll-margin-top: var(--sp-8); padding-top: var(--sp-5); }
.job-apply__h { font-size: calc(var(--fs-h3) * 1.15); line-height: 1.3; }
.job-apply__promise { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-1); }
.job-apply__promise li { position: relative; padding-left: var(--sp-4); color: var(--fg-muted); }
.job-apply__promise li::before { content: ""; position: absolute; left: 0; top: .8em; width: 10px; height: 1px; background: var(--fg-dim); }
.job-apply__form { margin-top: var(--sp-6); }
.job-apply__alt { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--fg-muted); }

/* ---- the group, reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .job-axis__mark, .job-rows__frame img, .job-rows__row .arrow { transition: none; }
}

/* ---- the group on tablets ---- */
@media (max-width: 900px) {
  .job-axis__head > div:first-child, .job-axis__intro { grid-column: 1 / -1; }
  .job-axis__intro { margin-top: var(--sp-6); }
  .job-axis__scale { margin-top: var(--sp-8); display: grid; grid-template-columns: minmax(0, 1fr); }
  .job-axis__ends { display: contents; }
  .job-axis__mid { order: 0; margin-bottom: var(--sp-5); }
  .job-axis__end { order: 1; padding: 0 0 var(--sp-4) var(--sp-5); border-left: 1px solid var(--axis-line); }
  .job-axis__roles { order: 2; grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 1px solid var(--axis-line); }
  .job-axis__end--b { order: 3; padding: var(--sp-4) 0 0 var(--sp-5); }
  .job-axis__roles::before, .job-axis__roles::after { display: none; }
  .job-axis__role { grid-row: auto; grid-column: 1; padding: var(--sp-4) 0 var(--sp-5) var(--sp-5); }
  .job-axis__link { padding-top: 0; }
  .job-axis__link::before { display: none; }
  .job-axis__mark { left: calc(var(--sp-5) * -1 - var(--axis-mark) / 2 - .5px); top: calc(var(--axis-title) * .6 - var(--axis-mark) / 2); }
  .job-axis__foot { margin-top: var(--sp-7); }

  .job-rows__head, .job-rows__intro, .job-rows__stage, .job-rows__body { grid-column: 1 / -1; grid-row: auto; }
  .job-rows__intro { margin-top: var(--sp-6); }
  .job-rows__stage { position: static; margin-top: var(--sp-7); max-width: 34rem; }
  .job-rows__body { margin-top: var(--sp-6); }

  .job-apply__intro, .job-apply__side { grid-column: 1 / -1; }
  .job-apply__side { margin-top: var(--sp-8); }
}

/* ---- the group on phones ---- */
@media (max-width: 640px) {
  .job-axis__head, .job-rows__grid, .job-apply__grid { column-gap: var(--sp-2); }
  .job-axis { --axis-title: var(--fs-h3); }
  .job-rows { --rows-title: var(--fs-h3); }
  .job-apply__open li { grid-template-columns: minmax(0, 1fr); }
  .job-apply__open .link { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--sp-2); }
}