/* ==========================================================================
   /karriere/ - Seitenspezifische Regeln.

   Alle Abstaende und Schriftgroessen sind an bestand-inhalt/screenshots/
   karriere-desktop.png (1920) nachgemessen. Die Abstaende stehen in der Form
   min(Npx, (N/10)vw) - das ist die Skalierung, die das Original ueber die
   WP-Spacing-Presets erzeugt (bei 400px Viewport bleiben 40 % uebrig).
   Basis-Tokens aus tokens.css, Header/Footer aus layout.css - beides wird
   hier nicht angefasst.
   ========================================================================== */

:root {
  /* Die Groesse, die im Original-DOM an jedem Fliesstext-Absatz haengt.
     Wortwoertlich aus bestand-inhalt/dom/karriere.rendered.html. */
  --k-fs-18: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.357), 18px);
  /* Ziffern der Bewerbungsschritte: 64px bei 1920, 40px bei 390. */
  --k-fs-64: clamp(40px, 2.5rem + ((1vw - 3.2px) * 1.5), 64px);
  /* is-service-name: 28px bei 1920 */
  --k-fs-28: clamp(19.6px, 1.225rem + ((1vw - 3.2px) * 0.525), 28px);
}

/* Innencontainer. Die Seite wechselt zwischen vier Breiten - das ist die
   eigentliche Layout-Logik des Originals (UMZUGSPLAN 9.3.2). Die Rechnung
   sorgt dafuer, dass die *Inhaltsbreite* exakt 800/1200/1300/1440px ist. */
.k-wrap {
  width: 100%;
  max-width: calc(1200px + 2 * var(--root-padding-inline));
  margin-inline: auto;
  padding-inline: var(--root-padding-inline);
}

.k-wrap--narrow { max-width: calc(800px + 2 * var(--root-padding-inline)); }
.k-wrap--lg     { max-width: calc(1300px + 2 * var(--root-padding-inline)); }
.k-wrap--wide   { max-width: calc(1440px + 2 * var(--root-padding-inline)); }

.k-center { text-align: center; }

/* tokens.css setzt li auf 19px - in den Rastern dieser Seite sind die
   Listenpunkte reine Layout-Huelsen, der Text darin ist 16 bzw. 18px. */
.k-voices__track > li,
.k-reasons__grid > li,
.k-steps__grid > li,
.k-carousel__track > li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Kleine Vorzeile ueber den Ueberschriften ("FAQ", "Finde Deinen Traumjob") */
.k-eyebrow {
  margin-bottom: 20px;
  text-align: center;
  font-size: var(--k-fs-18);
  color: var(--color-theme-5);
}

.k-eyebrow--left { text-align: left; }

/* --------------------------------------------------------------------------
   1. Hero
   Original: wp-block-cover, min-height 906px (Desktop wie Mobil), Foto mit
   object-position 51% 0%, darueber ein weisser Schleier mit 40 % Deckkraft.
   Textspalte 800px zentriert, Siegel unten links.
   -------------------------------------------------------------------------- */

.k-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 906px;
  padding: var(--space-40);
  overflow: hidden;
  background-color: #d7d7d5;
}

.k-hero__media,
.k-hero__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.k-hero__media img {
  object-fit: cover;
  object-position: 51% 0%;
}

.k-hero__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.4);
}

.k-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Im Original zwei 100px-Spacer; der groessere Wert unten reproduziert den
   zusaetzlichen Abstand des Button-Blocks zum Siegel (gemessen). */
.k-hero__text {
  padding-block: min(100px, 10vw) min(150px, 15vw);
}

.k-hero__text h1,
.k-hero__text h2 {
  font-size: clamp(27.42px, 1.714rem + ((1vw - 3.2px) * 1.748), 47px);
  font-weight: var(--fw-bold);
  color: var(--color-theme-5);
}

.k-hero__text h2 { margin-top: 20px; }

.k-hero__claim {
  margin-top: 40px;
  text-align: center;
  font-size: clamp(14.642px, 0.915rem + ((1vw - 3.2px) * 0.657), 22px);
  font-weight: var(--fw-bold);
  color: var(--color-theme-5);
}

.k-hero__cta {
  margin-top: 24px;
  text-align: center;
}

.k-hero__cta .button {
  background-color: var(--color-theme-5);
}

/* Im Original sitzt das Siegel nicht absolut unten, sondern als letzte Zeile
   im mittig ausgerichteten Cover-Inhalt - deshalb rutscht der Text nach oben. */
.k-hero__seal {
  margin: 0;
  line-height: 0;
}

.k-hero__seal img {
  width: 174px;
  height: auto;
}

/* --------------------------------------------------------------------------
   2. Intro
   -------------------------------------------------------------------------- */

.k-intro {
  padding-top: min(100px, 10vw);
}

.k-intro h2 { text-align: center; }

.k-intro p {
  margin-top: 20px;
  font-size: var(--k-fs-18);
}

/* --------------------------------------------------------------------------
   3. Mitarbeiterstimmen
   Im Original ein statisches Drei-Spalten-Raster - der Swiper des Plugins
   "Testimonial Free" steckt in der Benefits-Sektion, nicht hier. Nachbau als
   Scroll-Snap-Bahn: ab 600px liegen die drei Karten nebeneinander wie im
   Original und die Bahn scrollt nur, wenn sie nicht passen; darunter stapeln
   sie wie im Original. Kein Swiper, kein jQuery, keine Slide-Duplikate.
   -------------------------------------------------------------------------- */

.k-voices {
  padding-top: min(139px, 13.9vw);
}

.k-voices__head {
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: min(59px, 5.9vw);
  text-align: center;
}

.k-voices__track {
  display: flex;
  gap: 41px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.k-voices__item {
  flex: 1 1 0;
  min-width: min(100%, 380px);
  scroll-snap-align: start;
}

.k-voice {
  margin: 0;
  border-top: 1px solid var(--color-theme-3);
  padding-top: 23px;
}

.k-voice__body { margin: 0; }

.k-voice__title {
  font-size: var(--k-fs-18);
  font-weight: var(--fw-bold);
  line-height: 1.65;
  color: var(--color-theme-5);
}

/* A7: Original #bbb auf Weiss = 1,92:1. #6b6b6b = 5,33:1. */
.k-voice__quote {
  margin-top: min(20px, 2.5vw);
  font-size: var(--k-fs-18);
  line-height: 1.65;
  color: #6b6b6b;
}

.k-voice__name {
  margin-top: 17px;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   4. + 11. Video
   Ersetzt die beiden Wistia-Player. 16:9, 1200px breit wie im Original.
   -------------------------------------------------------------------------- */

.k-videosection {
  padding-top: min(43px, 4.3vw);
  padding-bottom: min(91px, 9.1vw);
}

.k-videosection--first {
  padding-top: min(151px, 15.1vw);
  padding-bottom: min(70px, 7vw);
}

.k-videosection h2 {
  margin-bottom: min(88px, 8.8vw);
}

.video {
  margin: 0;
  line-height: 0;
  /* Die Rundung sitzt auf der Figur, nicht auf dem <video>: der Player legt
     Vorschau, Overlay und Leiste darueber und erbt sie von hier. */
  border-radius: var(--radius-5);
}

.video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: inherit;
  background-color: var(--color-theme-5);
}

/* --------------------------------------------------------------------------
   5. 9 Gruende
   -------------------------------------------------------------------------- */

.k-reasons {
  background-color: var(--color-bg-alt);
  padding-block: min(100px, 10vw);
  /* Im Original trennt ein 20px hoher weisser Spacer die Sektion vom Foto. */
  margin-bottom: 20px;
}

.k-reasons__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(74px, 7.4vw) 40px;
  margin: min(60px, 6vw) 0 0;
  padding: 0;
  list-style: none;
}

.k-reason h3 {
  font-size: var(--k-fs-28);
  line-height: 1.357;
  text-align: center;
  color: var(--color-heading);
}

.k-reason p {
  margin-top: min(27px, 3.4vw);
  text-align: center;
}

/* --------------------------------------------------------------------------
   6. Gesundheits-Benefitssystem
   Original: Swiper-Carousel mit Loop-Duplikaten auf einem lazy geladenen
   Foto. A: dunkle Grundfarbe unter dem Bild, damit die weisse Schrift nie
   kurzzeitig auf Weiss steht. Duplikate entfallen, Pfeile funktionieren.
   -------------------------------------------------------------------------- */

.k-benefits {
  position: relative;
  padding-top: min(119px, 11.9vw);
  padding-bottom: min(127px, 12.7vw);
  background-color: #14161a;
  color: var(--color-theme-1);
  overflow: hidden;
}

.k-benefits__media,
.k-benefits__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.k-benefits__media img {
  object-fit: cover;
  object-position: center;
}

.k-benefits__inner {
  position: relative;
  z-index: 1;
}

.k-benefits h2 { color: var(--color-theme-1); }

.k-benefits__lead {
  margin-top: 20px;
  text-align: center;
  font-size: var(--k-fs-18);
  color: var(--color-theme-1);
}

.k-carousel {
  position: relative;
  margin-top: min(91px, 9.1vw);
}

.k-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 20px) / 3);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.k-carousel__track::-webkit-scrollbar { display: none; }

.k-carousel__item { scroll-snap-align: start; }

.k-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(34px, 4.3vw);
  height: 100%;
  min-height: 307px;
  border-radius: var(--radius-10);
  background-color: var(--color-theme-1);
  padding: 32px 40px;
  text-align: center;
  color: var(--color-text);
}

.k-benefit img {
  width: 76px;
  height: 76px;
}

.k-benefit p { line-height: 1.65; }

.k-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 44px;
  border: 0;
  border-radius: 2px;
  background-color: var(--color-theme-1);
  color: var(--color-theme-5);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.k-carousel__nav--prev { right: calc(100% + 20px); }
.k-carousel__nav--next { left: calc(100% + 20px); }

.k-carousel__nav[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* Ohne JS sind die Pfeile funktionslos - dann bleibt die native Wischbahn. */
html.no-js .k-carousel__nav { display: none; }

/* --------------------------------------------------------------------------
   7. Bewerbungsprozess
   A: Ziffer war <h3>, Titel <h4>. Jetzt Ziffer dekorativ, Titel <h3>.
   A7: Textfarbe #979797 (2,92:1) -> #6b6b6b (5,33:1).
   -------------------------------------------------------------------------- */

.k-steps {
  padding-top: min(99px, 9.9vw);
  padding-bottom: min(65px, 6.5vw);
}

.k-steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 41px;
  margin: min(90px, 9vw) 0 0;
  padding: 0;
  list-style: none;
}

.k-step {
  border: 1px solid var(--color-theme-3);
  padding: 20px 22px 16px;
}

.k-step__number {
  display: block;
  text-align: center;
  font-size: var(--k-fs-64);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-theme-5);
}

.k-step h3 {
  margin-top: min(23px, 2.9vw);
  font-size: var(--fs-medium);
  line-height: 1.3;
  color: var(--color-heading);
}

.k-step p {
  margin-top: min(20px, 2.5vw);
  color: #6b6b6b;
}

/* --------------------------------------------------------------------------
   8. Stellenanzeigen
   -------------------------------------------------------------------------- */

.k-jobs {
  background-color: var(--color-bg-alt);
  padding-top: min(111px, 11.1vw);
  padding-bottom: min(70px, 7vw);
}

.k-jobs__inner {
  display: grid;
  grid-template-columns: 1fr 620px;
  align-items: center;
  gap: 40px;
}

.k-jobs__panel {
  display: grid;
  gap: 8px;
  border-radius: var(--radius-10);
  background-color: var(--color-theme-1);
  padding: 19px 40px 12px;
}

.k-job {
  position: relative;
  display: block;
  border: 0;
  border-radius: var(--radius-10);
  background-color: var(--color-theme-5);
  padding: 14px 22px;
  color: var(--color-theme-1);
  font-size: var(--fs-medium);
  font-weight: var(--fw-button);
  line-height: 1.65;
  text-align: center;
  text-decoration: none;
}

.k-job:hover,
.k-job:focus-visible {
  background-color: var(--color-theme-4);
}

/* Kennzeichnung, dass der Link das Haus verlaesst. Nur der Pfeil steht im
   Button - damit bleibt dessen Hoehe die des Originals; den Zielhost nennt
   die Fussnote unter den Buttons. */
.k-job__hint {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 1;
  color: #c4c4c4;
}

.k-jobs__note {
  margin-top: 2px;
  font-size: var(--fs-small);
  line-height: 1.4;
  text-align: center;
  color: #5f5f5f;
}

.k-job--details {
  padding: 0;
  border-radius: var(--radius-8);
  text-align: left;
}

.k-job--details > summary {
  border-radius: var(--radius-8);
  padding: 15px 32px;
  text-align: center;
  font-size: 28px;
  line-height: 1.65;
  cursor: pointer;
}

.k-job--details > p {
  padding: 4px 32px 18px;
  font-size: var(--fs-body);
  line-height: 1.65;
}

.k-job--details a { color: var(--color-theme-1); }

/* --------------------------------------------------------------------------
   9. FAQ - native <details>, zwei Spalten wie im Original.
   -------------------------------------------------------------------------- */

.k-faq {
  padding-top: min(65px, 6.5vw);
  padding-bottom: min(43px, 4.3vw);
}

.k-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min(69px, 6.9vw) 35px;
  margin-top: min(63px, 6.3vw);
}

.k-faq__item {
  align-self: start;
  border-radius: var(--radius-8);
  background-color: var(--color-theme-5);
  color: var(--color-theme-1);
}

.k-faq__item > summary {
  padding: 15px 32px;
  font-size: 28px;
  line-height: 1.65;
  text-align: center;
  cursor: pointer;
}

.k-faq__item > p {
  padding: 4px 32px 24px;
  font-size: var(--fs-body);
  line-height: 1.75;
}

/* --------------------------------------------------------------------------
   10. Du hast weitere Fragen?
   -------------------------------------------------------------------------- */

.k-more {
  margin-top: min(60px, 6vw);
}

.k-more p {
  margin-top: 20px;
  font-size: var(--k-fs-18);
}

.k-more__button {
  border-radius: var(--radius-6);
  margin-top: 17px;
}

/* --------------------------------------------------------------------------
   12. Bewerbungsformular
   Natives <form>, funktioniert ohne JavaScript. Backend folgt spaeter.
   -------------------------------------------------------------------------- */

.k-apply {
  background-color: var(--color-theme-5);
  color: var(--color-theme-1);
  padding-top: min(70px, 7vw);
  padding-bottom: min(160px, 16vw);
}

.k-apply__inner {
  display: grid;
  grid-template-columns: 1fr 590px;
  align-items: center;
  gap: 28px;
}

.k-apply__intro h2 {
  color: var(--color-theme-1);
  font-size: var(--fs-h2);
}

.k-apply__intro p {
  margin-top: min(34px, 4.3vw);
  font-size: var(--k-fs-18);
  line-height: 1.65;
}

.k-form__row { margin-bottom: 30px; }

.k-form__label {
  display: block;
  margin-bottom: 0;
  line-height: 1.2;
  color: #777771;
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}

.k-form__req { color: var(--color-error); }

.k-form__input {
  display: block;
  width: 100%;
  min-height: 41px;
  border: 1px solid var(--color-theme-1);
  border-radius: var(--radius-6);
  background-color: var(--color-theme-1);
  padding: 9px 14px;
  color: #333333;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.3;
}

.k-form__textarea {
  min-height: 140px;
  resize: vertical;
}

.k-form__input::placeholder { color: #767676; }

.k-form__counter {
  display: block;
  margin-top: 9px;
  text-align: right;
  font-size: 12px;
  color: #999999;
}

.k-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.35;
}

.k-form__consent input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-theme-1);
}

.k-form__consent a { color: var(--color-theme-1); }

.k-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.k-form__submit {
  min-height: 40px;
  margin-top: 1px;
  border-radius: var(--radius-2);
  background-color: var(--color-theme-1);
  padding: 10px 22px;
  color: var(--color-form-submit-alt);
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
}

.k-form__submit:hover,
.k-form__submit:focus-visible {
  background-color: var(--color-theme-2);
  color: var(--color-theme-5);
}

.k-apply :focus-visible { outline-color: var(--color-theme-1); }

/* ==========================================================================
   Breakpoints. Die Site hat genau einen echten Umbruch bei 600px; fuer die
   mehrspaltigen Raster dieser Seite braucht es zusaetzlich 1024 und 900.
   ========================================================================== */

@media (max-width: 1023px) {
  .k-jobs__inner,
  .k-apply__inner {
    grid-template-columns: 1fr;
  }

  .k-carousel__track {
    grid-auto-columns: calc((100% - 20px) / 2);
  }
}

@media (max-width: 899px) {
  .k-reasons__grid,
  .k-steps__grid,
  .k-faq__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .k-faq__grid { gap: 35px; }
}

@media (max-width: 599px) {
  .k-reasons__grid,
  .k-steps__grid,
  .k-faq__grid {
    grid-template-columns: 1fr;
  }

  .k-reasons__grid { gap: 44px; }
  .k-steps__grid   { gap: 24px; }
  .k-faq__grid     { gap: 24px; }

  /* Wie im Original: unter 600px stapeln die Stimmen statt zu scrollen. */
  .k-voices__track {
    display: block;
    overflow-x: visible;
  }

  .k-voice { margin-top: 34px; }

  /* Wie im Original: eine Karte mittig, die Pfeile links und rechts daneben. */
  .k-carousel__track {
    grid-auto-columns: calc(100% - 96px);
    padding-inline: 48px;
    scroll-padding-inline: 48px;
  }

  .k-carousel__nav--prev { right: auto; left: 0; }
  .k-carousel__nav--next { left: auto; right: 0; }

  .k-jobs__panel { padding: 14px; }

  .k-faq__item > summary,
  .k-job--details > summary {
    padding-inline: 16px;
  }

  .k-apply__inner { gap: 40px; }
}