/* Career pages share the homepage palette, spacing and controls. */
:root {
  --careers-title: clamp(44px, 5.1vw, 72px);
  --careers-heading: clamp(30px, 3vw, 42px);
  --careers-lead: clamp(19px, 1.65vw, 23px);
  --careers-hero-height: 510px;
  --careers-photo-fade: 12%;
  --careers-top-fade: 10%;
  --careers-photo-ratio: 3 / 2;
  --careers-line-height: 1.55;
  --careers-title-leading: 1.04;
  --careers-heading-leading: 1.15;
}
.careers-hero {
  display: grid;
  grid-template-columns: 44% 56%;
  align-items: center;
  min-height: var(--careers-hero-height);
  padding-block: var(--s10) var(--s12);
}
.careers-hero-copy {
  position: relative;
  z-index: 1;
  padding-right: var(--s8);
}
.careers-hero h1 {
  font-size: var(--careers-title);
  line-height: var(--careers-title-leading);
  letter-spacing: var(--tracking);
  margin: var(--s4) 0 var(--s6);
}
.careers-hero p {
  max-width: var(--copy);
}
.careers-hero .careers-lead {
  font-size: var(--careers-lead);
  line-height: var(--careers-line-height);
  color: var(--ink);
  margin-bottom: var(--s4);
}
.careers-hero-copy > p:not(.eyebrow):not(.careers-lead) {
  color: var(--muted);
}
.careers-hero .button {
  margin-top: var(--s6);
}
.careers-hero .careers-note {
  font-size: var(--tiny);
  margin-top: var(--s3);
}
.careers-team {
  margin: 0 calc(-1 * var(--gutter)) 0 calc(-1 * var(--s4));
}
.careers-team img {
  width: 100%;
  height: auto;
  display: block;
  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black var(--careers-top-fade),
      black 82%,
      transparent
    ),
    linear-gradient(to right, transparent, black var(--careers-photo-fade));
  mask-composite: intersect;
}
.careers-facts {
  padding-block: var(--s8) var(--s12);
}
.careers-facts h2,
.careers-voices h2 {
  font-size: var(--h3);
  letter-spacing: var(--tracking-title);
  margin-bottom: var(--s6);
}
.careers-facts dl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s8);
  margin: 0;
}
.careers-facts dl > div {
  padding-top: var(--s5);
  border-top: var(--rule) solid var(--line);
}
.careers-facts dt {
  font-size: var(--body);
  font-weight: 600;
  line-height: var(--careers-line-height);
  margin-bottom: var(--s2);
}
.careers-facts dd {
  margin: 0;
  color: var(--muted);
  font-size: var(--small);
  line-height: var(--careers-line-height);
}
.careers-working {
  display: grid;
  grid-template-columns: 48% 1fr;
  gap: var(--s16);
  align-items: center;
  padding-block: var(--s10) var(--s12);
}
.careers-working figure {
  margin: 0;
}
.careers-working img {
  width: 100%;
  height: auto;
  display: block;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black var(--careers-top-fade),
    black 85%,
    transparent
  );
}
.careers-working h2 {
  font-size: var(--careers-heading);
  line-height: var(--careers-heading-leading);
  margin-block: var(--s4) var(--s6);
}
.careers-working p:not(.eyebrow) {
  color: var(--muted);
  margin-block: var(--s4);
}
.careers-working a {
  color: var(--accent);
  display: inline-block;
  margin-top: var(--s3);
  font-size: var(--small);
}
.careers-voices {
  padding-block: var(--s8) var(--s16);
}
.careers-details {
  display: grid;
  grid-template-columns: 1fr 48%;
  gap: var(--s16);
  align-items: start;
  padding-block: var(--s8) var(--s12);
}
.careers-details h2 {
  font-size: var(--careers-heading);
  line-height: var(--careers-heading-leading);
  margin-bottom: var(--s6);
}
.careers-details details {
  border-bottom: var(--rule) solid var(--line);
  scroll-margin-top: calc(var(--header) + var(--s6));
}
.careers-details summary {
  padding-block: var(--s4);
  font-size: var(--body);
  font-weight: 600;
  line-height: var(--careers-line-height);
}
.careers-details summary::marker {
  color: var(--accent);
}
.careers-detail-text {
  padding-bottom: var(--s5);
  color: var(--muted);
  font-size: var(--small);
}
.careers-detail-text p + p {
  margin-top: var(--s4);
}
@media (max-width: 900px) {
  .careers-details {
    grid-template-columns: 1fr;
    gap: var(--s8);
  }
}
.careers-voices {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--s16);
}
.careers-voices h2 {
  font-size: var(--careers-heading);
  line-height: var(--careers-heading-leading);
}
.careers-testimonial,
.careers-testimonial blockquote {
  margin: 0;
}
.careers-testimonial + .careers-testimonial {
  margin-top: var(--s10);
  padding-top: var(--s10);
  border-top: var(--rule) solid var(--line);
}
.careers-testimonial blockquote {
  font-size: var(--large);
  line-height: var(--careers-line-height);
}
.careers-testimonial p + p {
  margin-top: var(--s4);
}
.careers-testimonial figcaption {
  margin-top: var(--s5);
  color: var(--muted);
  font-size: var(--small);
}
.careers-invitation {
  background: var(--night);
  color: var(--paper);
}
.careers-invitation > .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s10);
  padding-block: var(--s10);
}
.careers-invitation h2 {
  font-size: var(--careers-heading);
  margin: 0 0 var(--s3);
}
.careers-invitation p {
  color: var(--night-muted);
  margin: 0;
}
.careers-invitation .button {
  background: var(--accent-light);
  color: var(--night);
  flex-shrink: 0;
}
.careers-invitation .button:hover {
  background: var(--accent-light-hover);
}
@media (max-width: 1000px) {
  .careers-hero {
    grid-template-columns: 1fr 1fr;
  }
  .careers-facts dl {
    grid-template-columns: repeat(2, 1fr);
  }
  .careers-working {
    gap: var(--s8);
  }
}
@media (max-width: 850px) {
  .careers-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: var(--s6);
    padding-bottom: var(--s2);
  }
  .careers-hero-copy {
    padding-right: 0;
  }
  .careers-team {
    margin: var(--s6) calc(-1 * var(--gutter)) 0;
  }
  .careers-team img {
    mask-image: linear-gradient(
      to bottom,
      transparent,
      black var(--careers-top-fade),
      black 85%,
      transparent
    );
  }
  .careers-facts {
    padding-block: var(--s6) var(--s8);
  }
  .careers-facts dl {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }
  .careers-working {
    grid-template-columns: 1fr;
    padding-block: var(--s6) var(--s10);
    gap: var(--s3);
  }
  .careers-working figure {
    order: 1;
    margin-top: var(--s4);
  }
  .careers-voices {
    padding-block: var(--s4) var(--s10);
  }
  .careers-voices {
    grid-template-columns: 1fr;
    gap: var(--s8);
  }
  .careers-invitation > .shell {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--s6);
    padding-block: var(--s8);
  }
}
@media (max-width: 380px) {
  .careers-facts dl {
    grid-template-columns: 1fr;
  }
}

.careers-hero .eyebrow,
.careers-working .eyebrow {
  color: var(--muted);
  font-size: var(--tiny);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.careers-application {
  scroll-margin-top: calc(var(--header) + var(--s4));
  padding-block: var(--s5);
  background: var(--paper);
}
.careers-application .application-layout {
  padding-block: 0;
}

body:has(#bewerbung:not([hidden])) .mobile-dock {
  display: none;
}