/* ============================================================
   GFI – Karriere (Hub + Job-Unterseiten)
   Ergänzung zu styles-v3.css + schulen-aemter.css
   Wirkt auf <html class="page-karriere">.
   ============================================================ */

html.page-karriere {
  scroll-padding-top: 6.5rem;
  scroll-behavior: auto;
}

/* ---------- Performance: schwere Effekte auf Content-Seiten aus ---------- */
.page-karriere .grain,
.page-karriere .cursor-ring,
.page-karriere .scroll-progress { display: none !important; }

/* Header: ungescrollt transparent, Hintergrund erst nach Scroll */
.page-karriere .site-header {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: transparent;
}
.page-karriere .site-header.scrolled {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.96);
}

/* Ken-Burns / Filter am Hero-Bild stoppen (läuft sonst dauerhaft) */
.page-karriere .hero-image,
.page-schulen.page-karriere .hero-image {
  animation: none !important;
  filter: none !important;
  transform: none !important;
  will-change: auto !important;
}
.page-karriere .hero-bg {
  will-change: auto !important;
  inset: 0;
}

/* Spot-Hintergründe / Glas: weniger große Gradients & Blur beim Scrollen.
   Abschnitte mit tone-* behalten ihre Flächen-Spots (Seitenrhythmus).
   Ausnahme: .audience und .news (Vorteile) – gleicher Look wie index-v3. */
.page-karriere :is(.intro, .ka-benefits, .ka-ladder, .ka-culture, .ka-values, .ka-day, .sa-team):not(.tone-white, .tone-green, .tone-orange) {
  background-image: none !important;
}

.page-karriere .audience {
  background: var(--section-grad-audience);
  overflow: hidden;
}

.page-karriere .news {
  background-color: var(--orange-50);
  background-image: var(--spots-orange);
  background-repeat: no-repeat;
  background-size: cover;
}

.page-teamleitung .faq {
  background-color: var(--orange-50);
  background-image: var(--spots-orange);
  background-repeat: no-repeat;
  background-size: cover;
}

/* Vorteile: Icon im Kachel-Inhalt (kein Bildbereich) */
.page-karriere #vorteile .news-card--icon .news-body,
.page-karriere #benefits .news-card--icon .news-body {
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  gap: .55rem;
}
.page-karriere #vorteile .news-card-ico,
.page-karriere #benefits .news-card-ico {
  --icon-badge-size: clamp(2.85rem, 3.8vw, 3.35rem);
  --icon-badge-glyph: clamp(1.2rem, 1.6vw, 1.4rem);
  width: var(--icon-badge-size);
  height: var(--icon-badge-size);
  margin: 0 0 .35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v3-teal);
  color: #fff;
  box-shadow: var(--shadow-teal);
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.34, 1.15, .5, 1), box-shadow .28s ease, background-color .25s ease;
}
.page-karriere #vorteile .news-card:nth-child(3n+2) .news-card-ico,
.page-karriere #benefits .news-card:nth-child(3n+2) .news-card-ico {
  background: var(--v3-orange);
  box-shadow: var(--shadow-orange);
}
.page-karriere #vorteile .news-card:nth-child(3n) .news-card-ico,
.page-karriere #benefits .news-card:nth-child(3n) .news-card-ico {
  background: var(--v3-green);
  box-shadow: var(--shadow-green);
}
.page-karriere #vorteile .news-card-ico .ico,
.page-karriere #benefits .news-card-ico .ico {
  width: var(--icon-badge-glyph);
  height: var(--icon-badge-glyph);
  color: #fff;
}
.page-karriere #vorteile .news-card,
.page-karriere #benefits .news-card {
  perspective: 900px;
  /* Benefit-Kacheln: weniger Glas-Transparenz als die globalen News-Karten */
  background: linear-gradient(165deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .88) 100%);
  border-color: rgba(255, 255, 255, .9);
}
.page-karriere #vorteile .news-card:hover .news-card-ico,
.page-karriere #benefits .news-card:hover .news-card-ico {
  transform: rotateY(180deg);
}
.page-karriere #vorteile .news-card--icon h3,
.page-karriere #benefits .news-card--icon h3 {
  margin: 0 0 .15rem;
  font-size: clamp(1.08rem, 1.5vw, 1.2rem);
  line-height: 1.28;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Vorteile: 4er-Raster auf großen Screens (8 Karten), sonst wie Wissen 3er */
@media (min-width: 1101px) {
  .page-karriere #vorteile .news-grid,
  .page-karriere #benefits .news-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Operativ: 6 Karten → 3 Spalten */
  .page-karriere-operative #vorteile .news-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-karriere .sa-form-card,
.page-karriere .faq-item,
.page-karriere .sa-pullquote {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.page-karriere .lead,
.page-karriere .sec-lead {
  color: var(--color-dark-deep);
  font-weight: 600;
  font-variation-settings: "wght" 600;
}

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

.page-karriere .main-nav > ul a.is-active { color: var(--teal-ink); }
.page-karriere .site-header:not(.scrolled) .main-nav > ul a.is-active { color: var(--orange); }
.page-karriere .main-nav > ul a.is-active::after { width: 100%; }
.page-karriere .main-nav .has-dropdown.is-active .nav-dropdown-toggle { color: var(--teal-ink); }
.page-karriere .site-header:not(.scrolled) .main-nav .has-dropdown.is-active .nav-dropdown-toggle { color: var(--orange); }
.page-karriere .main-nav .has-dropdown.is-active .nav-dropdown-toggle::before { width: 100%; }

.page-karriere .eyebrow { color: var(--color-dark-deep); }
.page-karriere .eyebrow-ring {
  color: var(--v3-orange);
  filter: none;
}

.page-karriere em,
.page-karriere i,
.page-karriere .hero-title em,
.page-karriere h2 em,
.page-karriere .loader-mark em {
  font-style: normal;
}
.page-karriere h1 em,
.page-karriere h2 em,
.page-karriere h3 em,
.page-karriere .hero-title em {
  color: var(--v3-orange);
  -webkit-text-fill-color: var(--v3-orange);
  font-size: inherit;
  line-height: inherit;
  font-weight: 800;
}

.page-karriere .hero .eyebrow.on-dark { color: #fff; }
.page-karriere .hero .eyebrow.on-dark .eyebrow-ring {
  color: var(--v3-orange);
  filter: drop-shadow(0 0 6px rgba(var(--v3-orange-rgb), .35));
}

.page-karriere .sa-request .eyebrow,
.page-karriere .sa-request .eyebrow.light { color: #fff; }
.page-karriere .sa-request .eyebrow-ring { color: var(--v3-orange); }

.page-karriere .hero-image { object-position: center 35%; }
.page-karriere-operative .hero-image { object-position: center 28%; }
.page-karriere-stellen .hero-image { object-position: center 28%; }
.page-teamleitung .hero-image {
  object-position: center 40%;
}
.page-geschaeftsfuehrung .hero-image {
  object-position: center 22%;
}
.page-geschaeftsfuehrung .hero-lead {
  margin: 0.35rem 0 0;
  max-width: 36rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 600;
  line-height: 1.45;
}
.page-geschaeftsfuehrung .hero-check-hint {
  margin: 0.85rem 0 0;
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.98rem, 1.4vw, 1.08rem);
  font-weight: 500;
  line-height: 1.45;
}
.page-geschaeftsfuehrung .sa-form-title {
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  line-height: 1.35;
  margin-bottom: 0.55rem;
}
.page-geschaeftsfuehrung .sa-form-lead {
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}
.page-geschaeftsfuehrung #bewerbungsprozess {
  --frame-gap-bottom: clamp(2.75rem, 6vw, 5rem);
  margin-bottom: var(--frame-gap-bottom);
}
.page-geschaeftsfuehrung #bewerbung {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.page-teamleitung .ka-hero-awards {
  /* Siegel sitzt zu 2/3 im Hero, 1/3 ragt heraus */
  --ka-award-shift: calc(100% / 3);
  position: absolute;
  left: calc(
    var(--hero-frame-margin, 20px)
    + max(0px, (100% - 2 * var(--hero-frame-margin, 20px) - var(--maxw)) / 2)
    + var(--pad)
  );
  right: auto;
  bottom: var(--hero-frame-margin, 20px);
  z-index: 6;
  width: clamp(5.5rem, 9vw, 8rem);
  transform: translateY(var(--ka-award-shift));
  pointer-events: none;
  line-height: 0;
}
.page-teamleitung .ka-hero-awards img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(20, 74, 69, .18));
}
html.js.page-teamleitung .ka-hero-awards {
  opacity: 0;
  transform: translateY(calc(var(--ka-award-shift) + 3.5rem));
}
html.js.page-teamleitung .hero-frame:has(.hero.is-in) .ka-hero-awards {
  animation: kaHeroAwardsIn 1.35s var(--ease) both;
  animation-delay: .75s;
}
@keyframes kaHeroAwardsIn {
  from {
    opacity: 0;
    transform: translateY(calc(var(--ka-award-shift) + 3.5rem));
  }
  to {
    opacity: 1;
    transform: translateY(var(--ka-award-shift));
  }
}

.page-karriere .ka-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .65rem;
  margin: 0 0 1.25rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.page-karriere .ka-crumb-bar {
  padding-top: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: 0;
}
.page-karriere .ka-crumb-bar .ka-crumb {
  margin: 0;
}
.page-karriere .ka-crumb a {
  color: var(--teal-ink);
  text-decoration: none;
}
.page-karriere .ka-crumb a:hover { color: var(--v3-orange); }
.page-karriere .ka-crumb [aria-current="page"] { color: var(--color-dark-deep); }
.page-karriere .ka-crumb--on-dark,
.page-karriere .ka-crumb--on-dark a,
.page-karriere .ka-crumb--on-dark [aria-current="page"] {
  color: rgba(255, 255, 255, 0.88);
}
.page-karriere .ka-crumb--on-dark a:hover { color: #fff; }

/* ---------- Einstiegspfade (Hub): nutzt globale .paths / .path-card aus styles-v3 ---------- */
.page-karriere .audience .sec-head { margin-bottom: clamp(2rem, 4vw, 3rem); }

.page-karriere .ka-paths-crosslink {
  margin: 2rem auto 0;
  text-align: center;
  max-width: 42rem;
}
.page-karriere .ka-paths-crosslink .card-link {
  display: inline-flex;
  margin-left: .35rem;
  vertical-align: baseline;
}

/* Icon-Badge (z. B. Konzept-Karten auf Job-Unterseiten) ---------- */
.ka-path-ico {
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v3-teal);
  color: #fff;
  box-shadow: var(--shadow-teal);
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.34, 1.15, .5, 1), box-shadow .28s ease;
}
.ka-path-ico .ico { width: 1.25rem; height: 1.25rem; }
.ka-concept { perspective: 900px; }
.ka-concept:hover .ka-path-ico { transform: rotateY(180deg); }

/* ---------- Kultur / Video (auch im Intro-Layout der Hub-Seite) ---------- */
.ka-culture {
  background: var(--section-grad-mint);
  background-image: var(--spots-mint);
}

.ka-culture-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.page-karriere .intro-media .ka-video {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: clamp(280px, 42vw, 440px);
  aspect-ratio: auto;
  border-radius: clamp(1.25rem, 2.4vw, 1.75rem);
}

.ka-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #0f2f2c;
}
.ka-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ka-video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(15, 47, 44, 0.15) 0%, rgba(15, 47, 44, 0.55) 100%),
    center / var(--ka-yt-poster-size, cover) no-repeat url("../assets/img/karriere-teamleitung/video-poster-gfi.webp");
}
.ka-video-play:focus-visible {
  outline: 3px solid var(--v3-orange);
  outline-offset: -3px;
}
.ka-video-play-ico {
  width: 4.25rem;
  height: 4.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v3-orange);
  box-shadow: var(--shadow-orange);
  transition: transform .25s var(--ease-out);
}
.ka-video-play:hover .ka-video-play-ico { transform: scale(1.06); }
.ka-video-play-ico::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: .2rem;
  border-style: solid;
  border-width: .55rem 0 .55rem .95rem;
  border-color: transparent transparent transparent #fff;
}
.ka-video.is-playing .ka-video-play { display: none; }
/* Startbild als echtes <img> (Pfad relativ zur Seite, wird beim Import umgeschrieben) */
.ka-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ka-video:has(.ka-video-poster) .ka-video-play {
  background: linear-gradient(180deg, rgba(15, 47, 44, 0.15) 0%, rgba(15, 47, 44, 0.55) 100%);
}

/* ---------- Benefits ---------- */
.ka-benefits {
  background-color: #fff;
  background-image: var(--spots-white);
}

.ka-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ka-benefit {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--r);
  border: 1.5px solid transparent;
  background: linear-gradient(165deg, var(--green-25) 0%, #fff 70%);
}
.ka-benefit .ico {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--v3-teal);
}
.ka-benefit h3 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.3;
}
.ka-benefit p {
  margin: 0;
  font-size: .94rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ---------- Kulturwerte (Jobseiten) ---------- */
.ka-values {
  background: var(--section-grad-soft);
  background-image: var(--spots-soft);
}

.ka-value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.ka-value h3 {
  margin: 0 0 .65rem;
  font-size: 1.2rem;
}
.ka-value .ka-value-contrast,
.ka-culture-copy .ka-value-contrast,
.ka-aside .ka-value-contrast {
  margin: 0 0 .75rem;
  font-weight: 700;
  color: var(--ink-soft);
  font-size: .95rem;
}
.ka-value p { margin: 0 0 .75rem; color: var(--ink-soft); line-height: 1.65; }
.ka-value p:last-child { margin-bottom: 0; }
.ka-value strong { color: var(--color-dark-deep); font-weight: 700; }

.ka-mid-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.page-teamleitung #bewerbung .sa-request-contact {
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: .85rem;
}
.page-teamleitung #bewerbung .sa-request-contact a {
  perspective: 900px;
}
.page-teamleitung #bewerbung .sa-request-contact .ico {
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.34, 1.15, .5, 1), background-color .25s ease;
}
.page-teamleitung #bewerbung .sa-request-contact a:hover .ico {
  transform: rotateY(180deg);
}

.ka-form-side {
  margin: 1.25rem 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  max-width: 22rem;
}
.ka-form-side img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  min-height: 0;
}

/* Legacy helpers (andere Jobseiten) */
.ka-culture-block,
.ka-task-layout,
.ka-profile-layout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.ka-culture-block { grid-template-columns: 1.05fr .95fr; align-items: start; margin-top: clamp(2.5rem, 5vw, 4rem); }
.ka-task-layout,
.ka-profile-layout { grid-template-columns: 1.1fr .9fr; align-items: start; }

/* ---------- Aufgaben / Profil ---------- */
.ka-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.ka-task-list,
.ka-profile-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.ka-task-list li,
.ka-profile-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  align-items: start;
}

.ka-task-list .ka-li-ico,
.ka-profile-list .ka-li-ico {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v3-teal);
  color: #fff;
  flex-shrink: 0;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.34, 1.15, .5, 1), box-shadow .28s ease;
}
.ka-task-list .ka-li-ico .ico,
.ka-profile-list .ka-li-ico .ico {
  width: 1.05rem;
  height: 1.05rem;
}
.ka-task-list li,
.ka-profile-list li {
  perspective: 900px;
}
.ka-task-list li:hover .ka-li-ico,
.ka-profile-list li:hover .ka-li-ico {
  transform: rotateY(180deg);
}

.ka-task-list h3,
.ka-profile-list h3 {
  margin: 0 0 .25rem;
  font-size: 1.05rem;
}
.ka-task-list p,
.ka-profile-list p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
  font-size: .96rem;
}

/* ---------- Typischer Tag ---------- */
.ka-day {
  background: var(--section-grad-mint);
  background-image: var(--spots-mint);
}

.ka-day-panel {
  max-width: 72ch;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background: #fff;
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.ka-day-panel p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  line-height: 1.7;
}
.ka-day-panel p:last-child { margin-bottom: 0; }

/* ---------- Prozess / Schritte ---------- */
.ka-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  counter-reset: ka-step;
}

.ka-steps-list--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.ka-step {
  position: relative;
  padding: 1.25rem 1.15rem 1.35rem;
  border-radius: var(--r);
  background: #fff;
  border: 1.5px solid var(--line);
  counter-increment: ka-step;
}
.ka-step::before {
  content: counter(ka-step);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: .75rem;
  border-radius: 50%;
  background: var(--v3-teal);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
}
.ka-step h3 {
  margin: 0 0 .4rem;
  font-size: 1.05rem;
}
.ka-step p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .94rem;
  line-height: 1.55;
}

/* ---------- Karrierestufen ---------- */
.ka-ladder {
  background: var(--section-grad-mint);
  background-image: var(--spots-mint);
}

.ka-ladder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.ka-ladder-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.15rem;
  padding: 1.25rem 1.35rem;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
  background: linear-gradient(165deg, #fff 0%, var(--green-25) 100%);
}
.ka-ladder-item.is-current {
  border-color: color-mix(in srgb, var(--v3-orange) 45%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--v3-orange) 25%, transparent);
}

.ka-ladder-num {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v3-teal);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.ka-ladder-item.is-current .ka-ladder-num { background: var(--v3-orange); }

.ka-ladder-item h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.ka-ladder-item p { margin: 0; color: var(--ink-soft); line-height: 1.6; font-size: .96rem; }
.ka-ladder-meta {
  display: inline-block;
  margin-bottom: .35rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--teal-ink);
}

/* ---------- Stimmen ---------- */
.ka-voices-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.5rem);
}

.ka-voice {
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  border-radius: var(--r-lg);
  background: #fff;
  border: 1.5px solid var(--line);
}
.ka-voice h3 {
  margin: 0 0 .85rem;
  font-size: 1.1rem;
}
.ka-voice-quote {
  position: relative;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  background: none;
}
.ka-voice .ka-voice-mark {
  display: block;
  width: clamp(1.85rem, 2.4vw, 2.25rem);
  height: auto;
  margin: 0 0 .65rem;
  line-height: 0;
}
.ka-voice .ka-voice-mark img {
  display: block;
  width: 100%;
  height: auto;
}
.ka-voice-quote p {
  margin: 0 0 .7rem;
  color: var(--color-dark-deep);
  font-size: 1.02rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.55;
}
.ka-voice-quote p:last-child { margin-bottom: 0; }
.ka-voice footer {
  margin-top: auto;
  padding-top: .35rem;
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-dark-deep);
}
.ka-voice footer cite {
  font-style: normal;
  font-weight: 700;
}
.ka-voice footer cite::before {
  content: "— ";
  color: var(--v3-orange);
  font-weight: 800;
}
.ka-voice footer span {
  display: block;
  font-weight: 500;
  color: var(--ink-soft);
  margin-top: .15rem;
}

/* ---------- Konzept (GF) ---------- */
.ka-concept-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.5rem);
}

.ka-concept {
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, #fff 0%, var(--green-25) 100%);
  border: 1.5px solid var(--line);
}
.ka-concept .ka-path-ico { margin-bottom: .85rem; }
.ka-concept h3 { margin: 0 0 .55rem; font-size: 1.15rem; }
.ka-concept p { margin: 0; color: var(--ink-soft); line-height: 1.65; }

/* ---------- Wachstumszahlen ---------- */
.ka-growth {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
.ka-growth li {
  padding: 1.15rem 1.2rem;
  border-radius: var(--r);
  background: #fff;
  border: 1.5px solid var(--line);
  text-align: center;
}
.ka-growth strong {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--v3-teal);
  line-height: 1.1;
  margin-bottom: .25rem;
}
.ka-growth span {
  font-size: .92rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.ka-growth-media {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.ka-growth-media img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  object-fit: contain;
}
/* Geschäftsführung › Wachstum: Standortkarte (wie Über uns), nur Städtenamen beim Hover */
.ka-map {
  position: relative;
  width: min(100%, 420px);
  margin: 0 auto;
  padding-top: 2.5rem;
}
.ka-map-stage {
  position: relative;
  aspect-ratio: 329 / 535;
}
.ka-growth-media .ka-map-svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 18px 22px rgba(31, 111, 104, 0.25));
}
.ka-map-pins {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ka-map-pin {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--v3-teal);
  box-shadow: 0 4px 14px rgba(var(--v3-teal-rgb), .35);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease-out), background-color .25s ease, box-shadow .3s ease;
  z-index: 2;
}
/* größere Hover-Fläche, Ring wie auf Über uns */
.ka-map-pin::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}
.ka-map-pin::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--v3-orange-rgb), .45);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .35s ease, transform .35s var(--ease-out);
}
.ka-map-pin:hover {
  background: var(--v3-orange);
  box-shadow: 0 6px 18px rgba(var(--v3-orange-rgb), .4);
  transform: translate(-50%, -50%) scale(1.18);
  z-index: 3;
}
.ka-map-pin:hover::after { opacity: 1; transform: scale(1); }
.ka-map-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  padding: .45rem .7rem;
  border: 1px solid color-mix(in srgb, var(--v3-teal) 14%, #fff);
  border-radius: 999px;
  background: #fff;
  color: var(--v3-teal);
  font-size: .78rem;
  font-weight: 700;
  font-variation-settings: "wght" 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(var(--v3-teal-rgb), .16);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity .25s ease, transform .25s var(--ease-out);
}
.ka-map-pin:hover .ka-map-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 760px) {
  .ka-map-pin { width: 16px; height: 16px; border-width: 2.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ka-map-pin,
  .ka-map-pin::after,
  .ka-map-tip { transition: none; }
}
/* Geschäftsführung › Wachstum: Umsatz-Liniendiagramm (HTML/SVG, Linie zeichnet sich ein) */
.ka-chart {
  --gutter: 3.4rem;
  --draw: 1.8s;
  width: 100%;
  margin: 0;
}
.ka-chart-title {
  margin: 0 0 1.5rem;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 800;
  font-variation-settings: "wght" 800;
  color: var(--teal-ink);
}
.ka-chart-title span {
  font-weight: 500;
  font-variation-settings: "wght" 500;
  color: var(--ink-soft);
}
.ka-chart-plot {
  position: relative;
  height: clamp(14rem, 28vw, 20rem);
  margin-left: var(--gutter);
}
.ka-chart-y,
.ka-chart-x {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .75rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.ka-chart-y li {
  position: absolute;
  right: calc(100% + .65rem);
  top: var(--y);
  transform: translateY(-50%);
  white-space: nowrap;
}
.ka-chart-x {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin-left: var(--gutter);
  padding-top: .65rem;
  text-align: center;
}
.ka-chart-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ka-chart-svg--grid line {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.ka-chart-area { fill: url(#ka-chart-fill); }
.ka-chart-line {
  fill: none;
  stroke: var(--v3-teal);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ka-chart-line--forecast {
  stroke: var(--green-ink);
  stroke-dasharray: 2 7;
}

/* Hover: je Jahr eine Spalte als Trefferfläche mit Fadenkreuz + Tooltip */
.ka-chart-col {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--x) - 100% / 16);
  width: calc(100% / 8);
  z-index: 2;
}
.ka-chart-col::before {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--y);
  bottom: 0;
  border-left: 1.5px dashed color-mix(in srgb, var(--v3-teal) 35%, transparent);
  opacity: 0;
  transition: opacity .25s ease;
}
.ka-chart-dot {
  position: absolute;
  left: 50%;
  top: var(--y);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--v3-teal);
  box-shadow: 0 0 0 3px #fff;
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease-out), opacity .4s ease, background-color .25s ease;
}
.ka-chart-col.is-forecast .ka-chart-dot {
  background: #fff;
  border: 2px solid var(--green-ink);
}
.ka-chart-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% - var(--y) + 16px);
  display: grid;
  gap: .05rem;
  padding: .45rem .75rem;
  border: 1px solid color-mix(in srgb, var(--v3-teal) 14%, #fff);
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: 0 10px 28px rgba(var(--v3-teal-rgb), .16);
  font-size: .78rem;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity .25s ease, transform .25s var(--ease-out);
}
.ka-chart-tip strong {
  font-weight: 800;
  font-variation-settings: "wght" 800;
  color: var(--teal-ink);
}
.ka-chart-col:first-of-type .ka-chart-tip { left: 0; transform: translateY(6px); }
.ka-chart-col:last-of-type .ka-chart-tip { left: auto; right: 0; transform: translateY(6px); }
.ka-chart-col:hover::before { opacity: 1; }
.ka-chart-col:hover .ka-chart-dot {
  transform: translate(-50%, -50%) scale(1.3);
  background: var(--v3-orange);
}
.ka-chart-col.is-forecast:hover .ka-chart-dot { background: #fff; border-color: var(--v3-orange); }
.ka-chart-col:hover .ka-chart-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ka-chart-col:first-of-type:hover .ka-chart-tip,
.ka-chart-col:last-of-type:hover .ka-chart-tip { transform: none; }

.ka-chart-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: .8rem;
  font-weight: 700;
  font-variation-settings: "wght" 700;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(calc(-100% - 12px), calc(-100% - 4px));
  transition: opacity .5s ease;
}
.ka-chart-label--forecast {
  font-weight: 600;
  font-variation-settings: "wght" 600;
  color: var(--ink-soft);
}

/* Einzeichnen beim Scrollen (JS setzt is-armed, dann is-drawn) */
.ka-chart.is-armed .ka-chart-svg--line {
  clip-path: inset(-20px 100% -20px -20px);
}
.ka-chart.is-armed .ka-chart-dot,
.ka-chart.is-armed .ka-chart-label { opacity: 0; }
.ka-chart.is-armed .ka-chart-dot { transform: translate(-50%, -50%) scale(.3); }
.ka-chart.is-drawn .ka-chart-svg--line {
  clip-path: inset(-20px -20px -20px -20px);
  transition: clip-path var(--draw) cubic-bezier(.45, 0, .25, 1);
}
.ka-chart.is-drawn .ka-chart-dot {
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-delay: calc(var(--draw) * (var(--n) + .5) / 8 - .1s);
}
.ka-chart.is-drawn .ka-chart-label { opacity: 1; transition-delay: var(--draw); }
.ka-chart.is-drawn .ka-chart-col:hover .ka-chart-dot {
  transform: translate(-50%, -50%) scale(1.3);
  transition-delay: 0s;
}

@media (max-width: 640px) {
  .ka-chart { --gutter: 2.9rem; }
  .ka-chart-y, .ka-chart-x { font-size: .68rem; }
  .ka-chart-label { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ka-chart *, .ka-chart *::before { transition: none !important; }
}
.ka-growth-media__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--r, 18px);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border: 1.5px solid var(--line);
}
.ka-growth-media__panel img {
  width: 100%;
  max-height: min(28rem, 70vw);
  height: auto;
  object-fit: contain;
}

/* ---------- Jobs-Hinweis (Hub) ---------- */
.ka-also {
  background: var(--section-grad-soft);
}
.ka-also-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--r-lg);
  background: #fff;
  border: 1.5px solid var(--line);
}
.ka-also-panel h2 { margin: 0 0 .4rem; font-size: clamp(1.3rem, 2vw, 1.55rem); }
.ka-also-panel p { margin: 0; color: var(--ink-soft); max-width: 52ch; line-height: 1.6; }

/* ---------- Award / Trainee ---------- */
.ka-aside-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
}
.ka-aside {
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  border-radius: var(--r-lg);
  background: #fff;
  border: 1.5px solid var(--line);
}
.ka-aside h3 { margin: 0 0 .55rem; }
.ka-aside p { margin: 0; color: var(--ink-soft); line-height: 1.65; }

/* ============================================================
   Teamleitung: Aufbau analog karriere-gfi.de (GFI-Design)
   ============================================================ */

/* Hero: Text links + Formular rechts auf Full-Bleed */
.page-teamleitung .ka-hero-split .hero-inner { display: none; }
.page-teamleitung .ka-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  width: 100%;
  padding-block: clamp(5.5rem, 10vw, 7.5rem) clamp(2rem, 4vw, 3rem);
}
.page-teamleitung .ka-hero-copy .hero-title {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
}
.page-teamleitung .ka-hero-phone {
  margin: 1.25rem 0 0;
}
.page-teamleitung .ka-hero-phone a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.page-teamleitung .ka-hero-phone .ico {
  width: 1.1rem;
  height: 1.1rem;
}
.page-teamleitung .ka-hero-form-card {
  max-height: min(78dvh, 760px);
  overflow: auto;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  box-shadow: 0 22px 50px rgba(15, 47, 44, 0.28);
}
.page-teamleitung .ka-hero-form-card .sa-form-title {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.3;
  margin-bottom: .85rem;
  text-align: center;
}
.page-teamleitung .ka-hero-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem .85rem;
}
.page-teamleitung .ka-hero-form-grid .sa-field--full { grid-column: 1 / -1; }
.page-teamleitung .ka-hero-form-grid .sa-field--half { grid-column: span 1; }
.page-teamleitung .ka-hero-form-card .sa-field label {
  font-size: .82rem;
}
.page-teamleitung .ka-hero-form-card input,
.page-teamleitung .ka-hero-form-card select,
.page-teamleitung .ka-hero-form-card textarea {
  min-height: 2.55rem;
  padding: .55rem .7rem;
  font-size: .92rem;
}
.page-teamleitung .ka-hero-form-card .sa-form-foot .btn {
  width: 100%;
  justify-content: center;
}

/* Intro GFI: Headline oben, darunter Text links / Video rechts */
.ka-intro-stack {
  background: transparent;
  background-image: none;
}
.ka-intro-stack .sec-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.ka-intro-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.ka-intro-copy .lead {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.7;
}
.ka-intro-video {
  width: 100%;
}
.ka-intro-video .ka-video {
  width: 100%;
  min-height: clamp(220px, 32vw, 360px);
}

/* Kultur: Kacheln untereinander, je Text + Video */
.ka-culture-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.75rem);
}
.ka-culture-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: clamp(1.25rem, 2.2vw, 1.75rem);
  background:
    linear-gradient(165deg, #fff 0%, var(--green-25) 100%);
  border: 1.5px solid color-mix(in srgb, var(--v3-teal) 14%, #fff);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.ka-culture-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--v3-teal);
}
.ka-culture-card:nth-child(2)::before {
  background: var(--v3-orange);
}
.ka-culture-card:nth-child(3)::before {
  background: var(--v3-green);
}
.ka-culture-card--flip::before {
  left: auto;
  right: 0;
}
.ka-culture-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.ka-culture-card--flip .ka-culture-card-body { order: 2; }
.ka-culture-card--flip .ka-culture-card-media { order: 1; }
.ka-culture-card-media {
  min-width: 0;
}
.ka-culture-card .ka-video {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.ka-culture-card-body {
  position: relative;
  padding: 0 .15rem 0 .55rem;
  min-width: 0;
}
.ka-culture-card--flip .ka-culture-card-body {
  padding: 0 .55rem 0 .15rem;
}
.ka-culture-index {
  margin: 0 0 .55rem;
}
.ka-culture-index span {
  display: inline-grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2rem;
  padding: 0 .65rem;
  border-radius: 999px;
  background: rgba(var(--v3-teal-rgb), .1);
  color: var(--v3-teal);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
}
.ka-culture-card:nth-child(2) .ka-culture-index span {
  background: rgba(var(--v3-orange-rgb), .14);
  color: var(--v3-orange);
}
.ka-culture-card:nth-child(3) .ka-culture-index span {
  background: rgba(var(--v3-green-rgb), .16);
  color: var(--v3-green);
}
.ka-culture-card-body h3 {
  margin: 0 0 1.15rem;
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  line-height: 1.18;
  letter-spacing: -.03em;
  color: var(--v3-teal);
}
.ka-culture-card-body > p {
  margin: 0 0 .85rem;
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.68;
}
.ka-culture-card-body > p:last-child { margin-bottom: 0; }

/* Zwischenüberschriften */
.ka-culture-card-body .ka-value-contrast {
  margin: 1.15rem 0 .7rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  color: var(--v3-orange);
  font-size: clamp(1.12rem, 1.8vw, 1.28rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.015em;
}
.ka-culture-card-body h3 + .ka-value-contrast {
  margin-top: 0;
}

/* Accordion: FAQ-Styling von styles-v3 (.accordion / .faq-item) */
.ka-tasks-copy > .accordion,
.ka-tasks-body > .accordion,
.ka-ladder-split > .accordion {
  margin-top: 0;
}
.ka-tasks-copy > h2 + .ka-tasks-body {
  margin-top: 0;
}
.page-karriere .faq-answer p + p { margin-top: .75rem; }
.page-karriere .faq-answer strong { color: var(--color-dark-deep); }

/* Aufgaben + Profil: zwei Zeilen, abwechselnd */
.ka-tasks-profile {
  background-color: #fff;
  background-image: var(--spots-white);
}
.ka-tasks-row,
.ka-profile-row {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}
.ka-tasks-row {
  grid-template-columns: 1fr;
}
.ka-tasks-body {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}
.ka-profile-row {
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  grid-template-columns: .95fr 1.05fr;
}
.ka-tasks-copy h2,
.ka-profile-copy h2 {
  margin: 0 0 1.15rem;
}
.ka-tasks-copy .eyebrow,
.ka-profile-copy .eyebrow {
  margin-bottom: .65rem;
}
.ka-tasks-img,
.ka-profile-hero-img {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ka-tasks-img img,
.ka-profile-hero-img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  min-height: clamp(280px, 40vw, 460px);
}
.ka-tasks-img--top img { object-position: center -40px; }
.ka-profile-copy .ka-profile-list { margin-top: 0; }

/* Arbeitstag: Steps links, Slideshow rechts */
.ka-day-split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
.ka-day .sec-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.ka-day-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.ka-day-step {
  display: grid;
  justify-items: center;
}
.ka-day-step-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  width: 100%;
  padding: clamp(1.1rem, 2vw, 1.4rem);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, #fff 0%, var(--green-25) 100%);
  border: 1.5px solid color-mix(in srgb, var(--v3-teal) 12%, #fff);
  box-shadow: var(--shadow-sm);
}
.ka-day-step-ico {
  width: 3.35rem;
  height: 3.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v3-teal);
  color: #fff;
  box-shadow: var(--shadow-teal);
  flex-shrink: 0;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.34, 1.15, .5, 1), box-shadow .28s ease, background-color .25s ease;
}
.ka-day-step { perspective: 900px; }
.ka-day-step:hover .ka-day-step-ico {
  transform: rotateY(180deg);
}
.ka-day-step:nth-child(2) .ka-day-step-ico {
  background: var(--v3-orange);
  box-shadow: var(--shadow-orange);
}
.ka-day-step:nth-child(3) .ka-day-step-ico {
  background: var(--v3-green);
  box-shadow: var(--shadow-green);
}
.ka-day-step:hover:nth-child(1) .ka-day-step-ico {
  box-shadow: 0 18px 36px rgba(var(--v3-teal-rgb), .32);
}
.ka-day-step:hover:nth-child(2) .ka-day-step-ico {
  box-shadow: 0 18px 36px rgba(var(--v3-orange-rgb), .34);
}
.ka-day-step:hover:nth-child(3) .ka-day-step-ico {
  box-shadow: 0 18px 36px rgba(var(--v3-green-rgb), .34);
}
.ka-day-step-ico .ico {
  width: 1.45rem;
  height: 1.45rem;
}
.ka-day-step-meta {
  margin: 0 0 .2rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v3-orange);
}
.ka-day-badge {
  display: inline-flex;
  align-items: center;
  margin: 0 0 .55rem;
  padding: .28rem .7rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--v3-teal);
  background: rgba(var(--v3-teal-rgb), .12);
}
.ka-day-step:nth-child(2) .ka-day-badge {
  color: #b86d38;
  background: rgba(var(--v3-orange-rgb), .2);
}
.ka-day-step:nth-child(3) .ka-day-badge {
  color: #2f7a5a;
  background: rgba(var(--v3-green-rgb), .2);
}
.ka-day-step-card h3 {
  margin: 0 0 .45rem;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  color: var(--v3-teal);
  line-height: 1.25;
}
.ka-day-step-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.6;
}
.ka-day-step-arrow {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 1.75rem;
  color: var(--v3-orange);
  transform: rotate(90deg);
}
.ka-day-step-arrow .ico {
  width: 1.05rem;
  height: 1.05rem;
}
.ka-day-slider {
  display: grid;
  gap: .9rem;
}
.ka-day-slider-viewport {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--line);
}
.ka-day-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s var(--ease-out), visibility .55s;
}
.ka-day-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.ka-day-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ka-day-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.ka-day-slider-btn {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--v3-teal);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.ka-day-slider-btn:hover {
  background: var(--green-25);
  border-color: color-mix(in srgb, var(--v3-teal) 28%, #fff);
}
.ka-day-slider-btn .ico {
  width: 1rem;
  height: 1rem;
}
.ka-day-slider-btn:not(.ka-day-slider-btn--next) .ico {
  transform: rotate(180deg);
}
.ka-day-slider-dots {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.ka-day-slider-dot {
  width: .55rem;
  height: .55rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--v3-teal) 28%, #fff);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
/* Unsichtbar vergrößerte Tippfläche, Punkt bleibt optisch klein */
.ka-day-slider-dot { position: relative; }
.ka-day-slider-dot::before {
  content: "";
  position: absolute;
  inset: -.75rem -.35rem;
}
.ka-day-slider-dot.is-active {
  background: var(--v3-orange);
  transform: scale(1.2);
}

/* Karriere: Accordion links + Grafik rechts */
.ka-ladder-copy {
  margin-bottom: clamp(1.35rem, 2.8vw, 2rem);
  max-width: 52rem;
}
.ka-ladder-copy .sec-lead {
  margin-bottom: 0;
}
.ka-ladder-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
.ka-ladder-media {
  margin-top: -200px;
}
.ka-ladder-media .ka-zoom {
  margin: 0;
}
.ka-ladder-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Führungskräfte-Übersicht: Schaubild oben, Kacheln darunter in einer Reihe */
.ka-ladder-media--overview {
  margin-top: 0;
  max-width: min(52rem, 100%);
  margin-inline: auto;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.ka-ladder-list--row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.85rem, 1.6vw, 1.15rem);
}
.ka-ladder-list--row .ka-ladder-item {
  grid-template-columns: 1fr;
  gap: .85rem;
  align-content: start;
  height: 100%;
}
.ka-ladder-list--row .ka-ladder-item h3 {
  font-size: clamp(1rem, 1.15vw, 1.08rem);
}
.ka-ladder-list--row .ka-ladder-item p {
  font-size: .9rem;
}

/* Führungskräfte: interaktives Karriere-Schaubild (gekoppelt an die Kacheln) */
.ka-path {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--shadow-sm);
  container: ka-path / inline-size;
}
.ka-path-steps {
  --lift: clamp(1.75rem, 4.2vw, 3.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.6rem, 1.4vw, 1.1rem);
  align-items: end;
}
.ka-path-step {
  position: relative;
  margin-bottom: calc(var(--i) * var(--lift));
  padding: 10px 0 0 10px;
}
/* versetzter Block hinter der Karte (wie im Original-Schaubild) */
.ka-path-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 10px;
  bottom: 10px;
  border-radius: var(--r-sm);
  background: var(--green-200);
  transition: background-color .5s ease, transform .5s var(--ease-out);
}
/* Stufen-Pfeil zur nächsten Karte */
.ka-path-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -1.75rem;
  right: 0;
  width: 1.35rem;
  height: 1.35rem;
  background: var(--green-300);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.ka-path-step--pre::before { background: var(--green-100); }

.ka-path-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  width: 100%;
  min-height: 9.75rem;
  margin: 0;
  padding: 1rem .7rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: center;
  box-shadow: 0 10px 24px rgba(var(--v3-teal-rgb), .08);
  transition: transform .5s var(--ease-out), border-color .4s ease, box-shadow .5s var(--ease-out);
}
button.ka-path-card { cursor: pointer; }
.ka-path-meta {
  font-size: .72rem;
  font-weight: 700;
  font-variation-settings: "wght" 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--teal-ink);
}
.ka-path-title {
  font-size: clamp(.95rem, 1.35vw, 1.2rem);
  font-weight: 800;
  font-variation-settings: "wght" 800;
  line-height: 1.2;
  hyphens: manual;
}
.ka-path-info {
  margin-top: auto;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.ka-path-step--pre .ka-path-card {
  border-style: dashed;
  background: var(--green-25);
  box-shadow: none;
}
.ka-path-step--pre .ka-path-meta,
.ka-path-step--pre .ka-path-title { color: var(--ink-soft); }

button.ka-path-card:hover {
  transform: translateY(-3px);
  border-color: var(--green-300);
}
button.ka-path-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-teal) 45%, transparent);
}
.ka-path-step.is-active::before {
  background: color-mix(in srgb, var(--v3-orange) 55%, #fff);
  transform: translate(-3px, -3px);
}
.ka-path-step.is-active .ka-path-card {
  transform: translateY(-3px);
  border-color: var(--v3-orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-orange) 22%, transparent), 0 16px 32px rgba(var(--v3-orange-rgb), .18);
}
.ka-path-title { transition: color .4s ease; }
.ka-path-step.is-active .ka-path-title { color: var(--teal-ink); }

.ka-path-timeline {
  position: relative;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  padding-bottom: 1rem;
  text-align: center;
  font-size: .95rem;
  font-weight: 700;
  font-variation-settings: "wght" 700;
  color: var(--ink);
}
.ka-path-timeline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 10px;
  bottom: 0;
  height: 3px;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--green-200), var(--v3-green));
}
.ka-path-timeline::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  border-left: 13px solid var(--v3-green);
  border-block: 6.5px solid transparent;
}

/* Alle Phasen-Leisten liegen übereinander: feste Höhe, weiches Überblenden */
.ka-path-phases-stack {
  display: grid;
  margin-top: 1.25rem;
}
.ka-path-phases {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
}
.ka-path-phases[hidden] { display: none; }
.ka-path.is-enhanced .ka-path-phases {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .4s var(--ease-out), visibility 0s linear .3s;
}
.ka-path.is-enhanced .ka-path-phases.is-current {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s ease .1s, transform .6s var(--ease-out) .1s, visibility 0s;
}
.ka-path.is-enhanced .ka-path-phase {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .3s ease, transform .4s var(--ease-out);
}
.ka-path.is-enhanced .is-current .ka-path-phase {
  opacity: 1;
  transform: none;
  transition: opacity .45s ease calc(.15s + var(--n, 0) * .07s), transform .6s var(--ease-out) calc(.15s + var(--n, 0) * .07s);
}
.ka-path-phase:nth-child(2) { --n: 1; }
.ka-path-phase:nth-child(3) { --n: 2; }
.ka-path-phases-title {
  margin: 0 0 .75rem;
  padding: .7rem 1rem;
  border-radius: var(--r-sm);
  background: var(--orange-50);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--v3-orange) 55%, #fff);
  text-align: center;
  font-size: clamp(.95rem, 1.4vw, 1.15rem);
  font-weight: 800;
  font-variation-settings: "wght" 800;
  color: var(--teal-ink);
}
.ka-path-phase-list {
  --tip: 1.6rem;
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ka-path-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  min-height: 5.5rem;
  padding: .9rem calc(var(--tip) + .9rem);
  background: var(--green-50);
  color: var(--teal-ink);
  text-align: center;
  clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%, var(--tip) 50%);
}
.ka-path-phase:first-child {
  clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%);
}
.ka-path-phase + .ka-path-phase { margin-left: -1rem; }
.ka-path-phase:nth-child(2) { background: var(--green-100); }
.ka-path-phase:nth-child(3) { background: var(--green-200); }
.ka-path-phase strong { font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 800; font-variation-settings: "wght" 800; }
.ka-path-phase span { font-size: .85rem; color: var(--ink); }

/* Unterseiten: Ausschnitt neben dem Akkordeon */
.ka-ladder-media--path { min-width: 0; }
.ka-ladder-media--path .ka-path { margin-bottom: 0; }

/* Gleiche Illustration wie auf der Übersicht: in Originalbreite gerendert und
   per zoom auf die Spalte verkleinert (JS setzt --ka-zoom), Klick vergrößert. */
.ka-path.is-scaled {
  width: var(--ka-path-width, 1170px);
  max-width: none;
  zoom: var(--ka-zoom, 1);
}
.ka-path[data-ka-path-zoom] { position: relative; }
.ka-path-zoom-btn { display: none; }
.ka-path.is-scaled .ka-path-zoom-btn {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: zoom-in;
}
.ka-path[data-ka-path-zoom].is-scaled {
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.ka-path[data-ka-path-zoom].is-scaled:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-card-hover);
}
.ka-path.is-scaled .ka-path-zoom-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--v3-teal) 45%, transparent);
}

.ka-lightbox--path .ka-lightbox-inner { max-width: 96vw; max-height: none; }
.ka-lightbox-scroll {
  max-width: 94vw;
  max-height: 90vh;
  overflow: auto;
  border-radius: var(--r-lg);
  overscroll-behavior: contain;
}
.ka-lightbox-scroll .ka-path { margin: 0; color: var(--ink); background: #fff; }
@media (max-width: 640px) {
  .ka-lightbox--path .ka-lightbox-close { transform: translate(0, -60%); top: 0; right: .5rem; }
}
/* Hochziehen neben die Überschrift nur, wenn diese sicher umbricht */
@media (max-width: 1279px) {
  .ka-ladder-media--path { margin-top: 0; }
}

/* Kacheln reagieren auf das Schaubild (und umgekehrt) */
.ka-ladder-item[data-ka-stage-tile] {
  cursor: pointer;
  transition: transform .5s var(--ease-out), border-color .4s ease, box-shadow .5s var(--ease-out);
}
.ka-ladder-item[data-ka-stage-tile] .ka-ladder-num { transition: background-color .4s ease; }
.ka-ladder-item.is-active {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--v3-orange) 55%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--v3-orange) 25%, transparent), 0 16px 32px rgba(var(--v3-orange-rgb), .14);
}
.ka-ladder-item.is-active .ka-ladder-num { background: var(--v3-orange); }

/* Gestapelt, sobald die Grafik selbst schmal ist (Mobil oder halbe Spalte) */
@container ka-path (max-width: 760px) {
  .ka-path-steps {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: .55rem;
  }
  .ka-path-step {
    margin-bottom: 0;
    margin-left: calc(var(--i) * 5%);
    padding: 6px 0 0 6px;
  }
  .ka-path-step::before { right: 6px; bottom: 6px; }
  .ka-path-step:not(:last-child)::after { display: none; }
  /* kompakte Zeile: Stufe + Titel links, Kennzahl rechts */
  .ka-path-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "meta info" "title info";
    align-items: center;
    column-gap: 1rem;
    row-gap: .1rem;
    min-height: 0;
    padding: .6rem .95rem;
    text-align: left;
  }
  .ka-path-meta { grid-area: meta; font-size: .68rem; }
  .ka-path-title { grid-area: title; font-size: 1rem; }
  .ka-path-info {
    grid-area: info;
    margin: 0;
    font-size: .76rem;
    line-height: 1.35;
    text-align: right;
  }
  .ka-path-timeline { margin-top: 1rem; font-size: .88rem; }
  .ka-path-phases-title { padding: .6rem .9rem; font-size: .95rem; }
  .ka-path-phase-list { --tip: 1.1rem; }
  .ka-path-phase {
    min-height: 4.5rem;
    padding: .7rem calc(var(--tip) + .5rem);
  }
  .ka-path-phase strong { font-size: .95rem; }
  .ka-path-phase span { font-size: .76rem; line-height: 1.35; }
  .ka-path-phase + .ka-path-phase { margin-left: -.7rem; }
}

/* sehr schmal: Kennzahl unter den Titel, Phasen untereinander */
@container ka-path (max-width: 440px) {
  .ka-path-card {
    grid-template-columns: 1fr;
    grid-template-areas: "meta" "title" "info";
  }
  .ka-path-info { text-align: left; margin-top: .1rem; }
  .ka-path-phase-list {
    --tip: .9rem;
    grid-template-columns: 1fr;
  }
  .ka-path-phase,
  .ka-path-phase:first-child {
    min-height: 0;
    padding: calc(var(--tip) + .7rem) 1rem;
    clip-path: polygon(0 0, 50% var(--tip), 100% 0, 100% calc(100% - var(--tip)), 50% 100%, 0 calc(100% - var(--tip)));
  }
  .ka-path-phase:first-child {
    padding-top: .9rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tip)), 50% 100%, 0 calc(100% - var(--tip)));
  }
  .ka-path-phase + .ka-path-phase { margin: -.35rem 0 0; }
  .ka-path-phase span { font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ka-path-step::before,
  .ka-path-card,
  .ka-ladder-item[data-ka-stage-tile] { transition: none; }
  .ka-path.is-enhanced .ka-path-phases,
  .ka-path.is-enhanced .ka-path-phase { transition: none !important; transform: none; }
  button.ka-path-card:hover,
  .ka-path-step.is-active .ka-path-card,
  .ka-ladder-item.is-active { transform: none; }
}

/* Zoomable freistehende Bilder + Lightbox */
.ka-zoom {
  margin: 0;
}
.ka-zoom-btn {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: 0;
  overflow: visible;
  transition: transform .35s var(--ease-out), filter .35s var(--ease-out);
}
.ka-zoom-btn img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  transition: transform .35s var(--ease-out), filter .35s var(--ease-out);
}
.ka-zoom-btn:hover,
.ka-zoom-btn:focus-visible {
  transform: scale(1.035);
  filter: brightness(1.04);
  outline: none;
}
.ka-zoom-btn:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-teal) 45%, transparent);
}

.ka-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  margin: 0;
  border: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  background: rgba(15, 47, 44, .88);
  color: #fff;
}
.ka-lightbox:not([open]) { display: none; }
.ka-lightbox::backdrop {
  background: transparent;
}
.ka-lightbox-inner {
  position: relative;
  max-width: min(92vw, 56rem);
  max-height: 88vh;
}
.ka-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}
.ka-lightbox-close {
  position: absolute;
  top: -.35rem;
  right: -.35rem;
  z-index: 1;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--v3-teal);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transform: translate(40%, -40%);
  transition: transform .25s var(--ease-out), background-color .25s var(--ease);
}
.ka-lightbox-close:hover,
.ka-lightbox-close:focus-visible {
  background: var(--v3-orange);
  color: #fff;
  outline: none;
}
.ka-lightbox-close svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Trainee / Award getrennt */
.ka-trainee {
  background-color: var(--orange-50);
  background-image: var(--spots-orange);
  background-repeat: no-repeat;
  background-size: cover;
}
.ka-split-plain {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
.ka-split-plain .frame-soft {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ka-trainee-media {
  margin: 0;
  min-width: 0;
}
/* Koordinationstrainee: gleiche Treppe, drei Stufen (gestapelt bleibt gestapelt) */
@container ka-path (min-width: 761px) {
  .ka-path--trainee .ka-path-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ka-path--trainee .ka-path-card { min-height: 11rem; }
}
.ka-trainee-media img,
.ka-split-plain img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.ka-split-plain p { color: var(--ink-soft); line-height: 1.65; }
.ka-split-plain .ka-value-contrast {
  font-weight: 700;
  color: var(--color-dark-deep);
}

.ka-award {
  background-color: #fff;
  background-image: var(--spots-white);
}
.ka-award-inner { max-width: 48rem; margin-inline: auto; }
.ka-award-img {
  margin: 0 0 1.25rem;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ka-award-img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.ka-award-text {
  margin: 0;
  text-align: center;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* Unser Versprechen: einzelnes Video unter dem GFI-Award */
.ka-promise {
  padding-top: 0;
  background-color: #fff;
  background-image: var(--spots-white);
}
.ka-promise-inner { max-width: 56rem; margin-inline: auto; }
.ka-promise .ka-video { width: 100%; }

.ka-voice .ka-video {
  margin-bottom: 1rem;
  aspect-ratio: 16 / 9;
}

/* Formular-Hinweise */
  margin: .35rem 0 0;
  font-size: .86rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.sa-form input[type="file"] {
  width: 100%;
  padding: .65rem .75rem;
  border: 1.5px dashed var(--line);
  border-radius: var(--r);
  background: #fff;
  font: inherit;
  color: var(--ink-soft);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .ka-benefit-grid,
  .ka-value-grid,
  .ka-voices-grid,
  .ka-concept-grid { grid-template-columns: 1fr 1fr; }
  .ka-culture-cols { grid-template-columns: 1fr; }
  .ka-culture-card--flip .ka-culture-card-body,
  .ka-culture-card--flip .ka-culture-card-media { order: initial; }
  .ka-steps-list,
  .ka-steps-list--5 { grid-template-columns: 1fr 1fr; }
  .ka-benefit-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .page-teamleitung .ka-hero-grid,
  .ka-intro-split,
  .ka-culture-grid,
  .ka-culture-block,
  .ka-culture-card,
  .ka-split,
  .ka-split-plain,
  .ka-task-layout,
  .ka-profile-layout,
  .ka-tasks-profile-grid,
  .ka-tasks-row,
  .ka-tasks-body,
  .ka-profile-row,
  .ka-day-split,
  .ka-ladder-split,
  .ka-also-panel,
  .ka-aside-grid { grid-template-columns: 1fr; }
  .ka-ladder-media { margin-top: 0; }
  .ka-ladder-list--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-teamleitung .ka-hero-grid {
    padding-block: clamp(5rem, 12vw, 6.5rem) 1.5rem;
  }
  .page-teamleitung .ka-hero-form-card {
    max-height: none;
  }
  .ka-also-panel .btn { justify-self: start; }
  .ka-value-grid,
  .ka-voices-grid,
  .ka-concept-grid,
  .ka-growth { grid-template-columns: 1fr; }
  .ka-growth-media { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ka-benefit-grid,
  .ka-steps-list,
  .ka-steps-list--5 { grid-template-columns: 1fr; }
  .ka-ladder-item { grid-template-columns: 1fr; }
  .ka-ladder-list--row { grid-template-columns: 1fr; }
  .page-teamleitung .ka-hero-form-grid {
    grid-template-columns: 1fr;
  }
  .page-teamleitung .ka-hero-form-grid .sa-field--half { grid-column: 1 / -1; }
  .page-teamleitung .ka-hero-awards {
    width: 5.5rem;
  }
}

/* GPTW-Siegel sitzt zu 2/3 im Hero (quadratisch):
   unten Platz für 2/3 der Award-Höhe lassen, damit sie die Buttons nicht überdecken */
@media (max-width: 1279px) {
  .theme-v3.page-teamleitung:not(.home-v3) body .hero {
    padding-bottom: calc(clamp(5.5rem, 9vw, 8rem) * 2 / 3 + 1.75rem);
  }
}
@media (max-width: 640px) {
  .theme-v3.page-teamleitung:not(.home-v3) body .hero {
    padding-bottom: calc(5.5rem * 2 / 3 + 1.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js.page-teamleitung .ka-hero-awards,
  html.js.page-teamleitung .hero-frame:has(.hero.is-in) .ka-hero-awards {
    opacity: 1;
    transform: translateY(var(--ka-award-shift));
    animation: none;
  }
  .page-karriere #vorteile .news-card:hover .news-card-ico,
  .page-karriere #benefits .news-card:hover .news-card-ico,
  .ka-day-step:hover .ka-day-step-ico,
  .ka-task-list li:hover .ka-li-ico,
  .ka-profile-list li:hover .ka-li-ico,
  .ka-concept:hover .ka-path-ico,
  .page-teamleitung #bewerbung .sa-request-contact a:hover .ico,
  .page-teamleitung .sa-timeline-item:hover .sa-timeline-ico {
    transform: none;
  }
}

/* ---------- Operative Mitarbeiter: Werte-Taglines + Job-Feeds ---------- */
.page-karriere .path-tagline {
  margin: 1rem 0 0;
  font-weight: 600;
  font-size: .95rem;
  color: var(--color-dark-deep, #173b36);
}

.page-karriere-operative #pruefstand .sec-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.page-karriere-operative .op-pruefstand {
  display: grid;
  gap: clamp(2rem, 4vw, 2.75rem);
}

.page-karriere-operative .op-pruefstand-head {
  max-width: none;
  width: 100%;
}

.page-karriere-operative .op-pruefstand-head h2 {
  margin: 0;
  line-height: 1.18;
  max-width: none;
}

.page-karriere-operative .op-pruefstand-lead {
  margin: 1rem 0 0;
  max-width: min(68rem, 100%);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.35vw, 1.16rem);
  line-height: 1.55;
  color: var(--color-dark-deep, #173b36);
}

.page-karriere-operative .op-pruefstand-media {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 34rem;
  justify-self: start;
  overflow: visible;
  z-index: 2;
}

.page-karriere-operative .op-pruefstand-layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
  overflow: visible;
  margin-bottom: clamp(.75rem, 1.5vw, 1.25rem);
}

.page-karriere-operative .op-pruefstand-media .ka-video {
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.page-karriere-operative .op-pruefstand-badge {
  position: absolute;
  right: clamp(-2.25rem, -4vw, -1.35rem);
  bottom: clamp(-1.75rem, -3.2vw, -1.1rem);
  z-index: 4;
  width: clamp(5.75rem, 11vw, 7.5rem);
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(23, 59, 54, 0.22);
  pointer-events: none;
}

.page-karriere-operative .op-pruefstand-aside {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  padding-top: .15rem;
}

.page-karriere-operative .op-pruefstand-copy {
  display: grid;
  gap: 1.1rem;
  color: var(--ink-soft, #3d524e);
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.7;
}

.page-karriere-operative .op-pruefstand-copy p { margin: 0; }

@media (max-width: 900px) {
  .page-karriere-operative .op-pruefstand-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .page-karriere-operative .op-pruefstand-aside {
    padding-top: 0;
  }

  .page-karriere-operative .op-pruefstand-badge {
    right: -1.1rem;
    bottom: -1.25rem;
    width: 5.5rem;
    border-radius: 10px;
  }

  .page-karriere-operative .op-pruefstand-media {
    max-width: none;
  }

  .page-karriere-operative .op-pruefstand-layout {
    margin-bottom: 1.1rem;
  }
}

.page-karriere-operative #vorteile .news-head > div {
  width: 100%;
}

.page-karriere-operative #vorteile .op-vorteile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: nowrap;
  margin-top: .75rem;
  width: 100%;
}

.page-karriere-operative #vorteile .op-vorteile-meta .sec-lead {
  margin: 0;
  max-width: 52ch;
  flex: 1 1 auto;
}

.page-karriere-operative #vorteile .op-vorteile-meta .card-link {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  white-space: nowrap;
}

.page-karriere-operative .op-einblicke {
  background: var(--section-grad-mint, linear-gradient(180deg, #f7fbf9 0%, #eef7f2 100%));
}

.page-karriere-operative .op-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.6rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.page-karriere-operative .op-video-card {
  display: grid;
  gap: .75rem;
  align-content: start;
}

.page-karriere-operative .op-video-card .ka-video {
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.page-karriere-operative .op-video-card h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--color-dark-deep, #173b36);
}

.page-karriere-operative .op-video-card p {
  margin: 0;
  color: rgba(23, 59, 54, 0.72);
  line-height: 1.5;
  font-size: .95rem;
}

/* Hintergrund wie „Auf was wir Wert legen“ über die Klasse .audience;
   Inhalt liegt über den weichen Farbflecken (::before/::after) */
.page-karriere-operative .op-sinn > .container {
  position: relative;
  z-index: 1;
}

.page-karriere-operative .op-sinn-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: end;
}

.page-karriere-operative .op-sinn-head h2 {
  margin: 0;
  max-width: 18ch;
  line-height: 1.15;
}

.page-karriere-operative .op-sinn-copy {
  display: grid;
  gap: .85rem;
  padding-left: clamp(1.1rem, 2vw, 1.6rem);
  border-left: 3px solid var(--v3-orange);
}

.page-karriere-operative .op-sinn-copy p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.7;
}

.page-karriere-operative .op-sinn-copy .op-sinn-lead {
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  font-weight: 700;
  font-variation-settings: "wght" 700;
  color: var(--color-dark-deep, #173b36);
}

/* Große hellgrüne Kachel um Leitsatz + Aussage-Spalten */
.page-karriere-operative .op-tiles-panel {
  margin-top: clamp(2.75rem, 5.5vw, 4rem);
  padding: clamp(1.5rem, 4vw, 3.25rem);
  border-radius: clamp(22px, 3vw, 34px);
  background: color-mix(in srgb, var(--v3-green) 14%, #fff);
  /* Rahmen + Schatten wie die grüne Karte „Gute Einarbeitung“ (.path-card:nth-child(1)) */
  border: 1.5px solid color-mix(in srgb, var(--accent-1) 48%, #fff);
  box-shadow:
    0 22px 52px rgba(var(--v3-green-rgb), 0.18),
    0 8px 22px rgba(var(--v3-green-rgb), 0.1);
}

.page-karriere-operative .op-tiles-lead {
  margin: 0;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  font-weight: 800;
  font-variation-settings: "wght" 800;
  color: var(--v3-teal, #1f6f68);
}

.page-karriere-operative .op-tiles-lead {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.35rem);
}

.page-karriere-operative .op-tiles-lead-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--v3-teal);
  box-shadow: 0 12px 26px rgba(var(--v3-teal-rgb), .28);
  color: #fff;
}

.page-karriere-operative .op-tiles-lead-ico .ico {
  width: 2.6rem;
  height: 2.6rem;
}

@media (max-width: 600px) {
  .page-karriere-operative .op-tiles-panel {
    padding: 1.5rem 1rem 1.25rem;
  }
  .page-karriere-operative .op-tiles-lead {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-karriere-operative .op-tiles-lead-ico {
    width: 3.5rem;
    height: 3.5rem;
  }
  .page-karriere-operative .op-tiles-lead-ico .ico {
    width: 2.05rem;
    height: 2.05rem;
  }
}

.page-karriere-operative .op-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  align-items: start;
}

.page-karriere-operative .op-tile-group {
  display: grid;
  gap: 1.5rem;
}

.page-karriere-operative .op-tile-group-title {
  margin: 0 0 .25rem;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  color: var(--v3-orange);
}

/* Sprechblasen: Zipfel zeigt nach unten und schließt bündig an die Außenkante an
   (Quereinsteigende links, Fachkräfte rechts); diese Ecke ist nicht gerundet.
   Blase und Zipfel sind eine reine Füllfläche ohne border. Haarlinie und Schatten
   kommen per drop-shadow aus der Gesamtform – dadurch nahtlos „aus einem Guss“.
   (::after rendert Chrome an <details> nicht zuverlässig, daher nur ::before.) */
.page-karriere-operative .op-tile {
  --tile-bg: #fff;
  --tile-line: rgba(23, 59, 54, 0.22);
  /* Orange Kante wird nur über die Deckkraft eingeblendet – kein dunkler Mischton */
  --tile-accent: rgba(var(--v3-orange-rgb), 0);
  --tile-shadow: rgba(30, 40, 36, 0.08);
  position: relative;
  border-radius: 22px 22px 22px 0;
  background: var(--tile-bg);
  filter:
    drop-shadow(0 0 .75px var(--tile-line))
    drop-shadow(0 0 .75px var(--tile-accent))
    drop-shadow(0 0 .75px var(--tile-accent))
    drop-shadow(0 8px 18px var(--tile-shadow));
  transition: filter .45s var(--ease-out), background-color .45s var(--ease-out);
}

.page-karriere-operative .op-tile::before {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  width: 20px;
  height: 15px;
  background: var(--tile-bg);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transition: background-color .25s var(--ease);
  pointer-events: none;
}

.page-karriere-operative .op-tile-group:nth-child(2) .op-tile {
  border-radius: 22px 22px 0 22px;
}

.page-karriere-operative .op-tile-group:nth-child(2) .op-tile::before {
  left: auto;
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.page-karriere-operative .op-tile:hover {
  --tile-accent: rgba(var(--v3-orange-rgb), 0.8);
}

/* Offen: ohne JS per [open], mit JS per .is-open (bleibt beim Zuklappen nicht hängen) */
.page-karriere-operative .op-tiles:not(.is-enhanced) .op-tile[open],
.page-karriere-operative .op-tile.is-open {
  --tile-accent: rgba(var(--v3-orange-rgb), 1);
  --tile-shadow: rgba(var(--v3-orange-rgb), 0.12);
}

.page-karriere-operative .op-tile summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  list-style: none;
}

.page-karriere-operative .op-tile summary::-webkit-details-marker { display: none; }

.page-karriere-operative .op-tile summary:focus-visible {
  outline: 2px solid var(--v3-orange);
  outline-offset: -4px;
  border-radius: 20px;
}

.page-karriere-operative .op-tile-q {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-variation-settings: "wght" 700;
  line-height: 1.45;
  color: var(--color-dark-deep, #173b36);
}

.page-karriere-operative .op-tile-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--v3-teal);
  transition: background .4s var(--ease-out);
}

.page-karriere-operative .op-tile-toggle::before,
.page-karriere-operative .op-tile-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}

.page-karriere-operative .op-tile-toggle::before { width: 12px; height: 2px; }
.page-karriere-operative .op-tile-toggle::after { width: 2px; height: 12px; }

.page-karriere-operative .op-tiles:not(.is-enhanced) .op-tile[open] .op-tile-toggle,
.page-karriere-operative .op-tile.is-open .op-tile-toggle { background: var(--v3-orange); }

.page-karriere-operative .op-tiles:not(.is-enhanced) .op-tile[open] .op-tile-toggle::after,
.page-karriere-operative .op-tile.is-open .op-tile-toggle::after {
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(0);
}

.page-karriere-operative .op-tile-body {
  display: grid;
  gap: .75rem;
  padding: 0 1.25rem;
}

/* Abstand unten als Margin im Inhalt, damit max-height 0 wirklich 0 ist */
.page-karriere-operative .op-tile-body p:last-child {
  margin-bottom: 1.25rem;
}

/* Weiches Auf-/Zuklappen (karriere.js setzt .is-enhanced und max-height) */
.page-karriere-operative .op-tiles.is-enhanced .op-tile-body {
  overflow: hidden;
  transition:
    max-height .55s cubic-bezier(.22, .61, .36, 1),
    opacity .45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .page-karriere-operative .op-tiles.is-enhanced .op-tile-body { transition: none; }
}

.page-karriere-operative .op-tile-body p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .96rem;
  line-height: 1.65;
}

.page-karriere-operative .op-tile-body strong {
  font-weight: 700;
  font-variation-settings: "wght" 700;
  color: var(--color-dark-deep, #173b36);
}

.page-karriere-operative .op-tile-body a {
  color: var(--v3-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .page-karriere-operative .op-tiles,
  .page-karriere-operative .op-sinn-intro { grid-template-columns: 1fr; }
  .page-karriere-operative .op-sinn-head h2 { max-width: none; }
}

.page-karriere-operative .op-cta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.page-karriere-operative .op-sinn .op-cta {
  justify-content: flex-start;
}

.page-karriere-operative .op-werte-intro {
  display: grid;
  gap: .9rem;
  max-width: 64ch;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
  text-align: center;
}

.page-karriere-operative .op-werte-intro p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

.page-karriere-operative .op-werte-intro .op-werte-lead {
  font-weight: 700;
  font-variation-settings: "wght" 700;
  color: var(--color-dark-deep, #173b36);
}

.page-karriere-operative .path-copy {
  display: grid;
  align-content: start;
  gap: .75rem;
  flex: 1;
}

.page-karriere-operative .path-copy p {
  margin: 0;
  font-size: .96rem;
  line-height: 1.6;
  color: var(--color-text-main);
}

/* Qualifizierung für Quereinsteiger (GFI-Akademie) */
.page-karriere-operative .op-akademie {
  background-color: var(--orange-50);
  background-image: var(--spots-orange);
  background-repeat: no-repeat;
  background-size: cover;
}

.page-karriere-operative .op-akademie-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
}

.page-karriere-operative .op-akademie-copy h2 {
  max-width: 18ch;
}

.page-karriere-operative .op-akademie-copy p {
  max-width: 62ch;
  margin: 0 0 1rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

.page-karriere-operative .op-akademie-copy .op-akademie-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  font-weight: 700;
  font-variation-settings: "wght" 700;
  color: var(--color-dark-deep, #173b36);
  line-height: 1.55;
}

.page-karriere-operative .op-akademie-card {
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border-radius: var(--r-xl);
  background: #fff;
  border: 1.5px solid rgba(var(--v3-orange-rgb), .3);
  box-shadow: var(--shadow-sm);
}

.page-karriere-operative .op-akademie-ico {
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-1);
  color: #fff;
  box-shadow: 0 12px 26px rgba(var(--v3-green-rgb), .3);
}

.page-karriere-operative .op-akademie-ico .ico {
  width: 1.45rem;
  height: 1.45rem;
}

.page-karriere-operative .op-akademie-card h3 {
  margin: 0 0 .6rem;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.3;
  color: var(--v3-teal);
}

.page-karriere-operative .op-akademie-card p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.65;
}

.page-karriere-operative .op-akademie-card a {
  color: var(--v3-teal);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-karriere-operative .op-akademie-list {
  list-style: none;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  display: grid;
  gap: .65rem;
}
.page-karriere-operative .op-akademie-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
  color: var(--color-dark-deep, #173b36);
  font-weight: 600;
  font-size: .96rem;
  line-height: 1.45;
}
.page-karriere-operative .op-akademie-list .ico {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .15rem;
  color: var(--v3-teal);
}
.page-karriere-operative .op-akademie-side {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.page-karriere-operative .op-akademie-media {
  margin: 0;
}
.page-karriere-operative .op-akademie-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (max-width: 900px) {
  .page-karriere-operative .op-akademie-layout { grid-template-columns: 1fr; }
  .page-karriere-operative .op-akademie-copy h2 { max-width: none; }
}

.page-karriere-operative .op-faq-main {
  max-width: 52rem;
  margin-inline: auto;
}

.page-karriere-operative .op-faq .faq-head {
  text-align: center;
}

.page-karriere-operative .op-faq .faq-head h2 {
  max-width: none;
}

@media (max-width: 900px) {
  .page-karriere-operative .op-video-grid {
    grid-template-columns: 1fr;
    max-width: 36rem;
    margin-inline: auto;
  }
}

/* Mobil: Hero wächst mit dem Inhalt, damit Eyebrow/Titel nicht unter das Logo rutschen */
@media (max-width: 760px) {
  .page-karriere-operative .hero-frame {
    height: auto;
    max-height: none;
  }
  .page-karriere-operative .hero {
    height: auto;
    max-height: none;
    min-height: calc(min(68dvh, 560px) - 2 * var(--hero-frame-margin, 20px));
    justify-content: flex-end;
    padding: 6.25rem 0 2.25rem;
  }
}

/* Abstrahierte Personen unter den Sprechblasen – bewusst ohne Gesicht/Details */
.page-karriere-operative .op-tile-speakers {
  margin-top: -.85rem;
  line-height: 0;
}

.page-karriere-operative .op-tile-speakers svg {
  width: clamp(140px, 13vw, 175px);
  height: auto;
  overflow: visible;
}

.page-karriere-operative .op-tile-speakers .sp-a { fill: var(--v3-teal); }
.page-karriere-operative .op-tile-speakers .sp-b { fill: var(--v3-orange); }
.page-karriere-operative .op-tile-speakers .sp-c { fill: var(--accent-1); }
.page-karriere-operative .op-tile-speakers .sp-voice {
  stroke: var(--v3-orange);
  opacity: .45;
  transition: opacity .45s var(--ease-out);
}

.page-karriere-operative .op-tile-group:nth-child(2) .op-tile-speakers { justify-self: end; }
.page-karriere-operative .op-tile-group:nth-child(2) .op-tile-speakers svg { transform: scaleX(-1); }
.page-karriere-operative .op-tile-group:nth-child(2) .sp-a { fill: var(--v3-orange); }
.page-karriere-operative .op-tile-group:nth-child(2) .sp-b { fill: var(--accent-1); }
.page-karriere-operative .op-tile-group:nth-child(2) .sp-c { fill: var(--v3-teal); }
.page-karriere-operative .op-tile-group:nth-child(2) .sp-voice { stroke: var(--v3-teal); }

/* Spricht gerade: Sprechlinien werden kräftig, solange eine Aussage der Gruppe offen ist */
.page-karriere-operative .op-tiles:not(.is-enhanced) .op-tile-group:has(.op-tile[open]) .sp-voice,
.page-karriere-operative .op-tile-group:has(.op-tile.is-open) .sp-voice {
  opacity: 1;
}

/* Werte-Karten mit Foto */
.page-karriere-operative .op-path-card {
  --pc-pt: clamp(2rem, 3vw, 2.55rem);
  --pc-px: clamp(1.75rem, 2.5vw, 2.15rem);
  padding: var(--pc-pt) var(--pc-px);
}

.page-karriere-operative .op-path-card::after { z-index: 2; }

.page-karriere-operative .op-path-media {
  margin: calc(-1 * var(--pc-pt)) calc(-1 * var(--pc-px)) 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.page-karriere-operative .op-path-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}

.page-karriere-operative .op-path-card:hover .op-path-media img { transform: scale(1.04); }

.page-karriere-operative .op-path-card .path-ico {
  z-index: 2;
  margin-top: calc(var(--icon-badge-size) / -2);
}

/* GPTW-Siegel in der Vorteil-Karte „Ausgezeichneter Arbeitgeber“ */
.page-karriere-operative #vorteile .op-gptw-card .news-body { position: relative; }

.page-karriere-operative .op-gptw-logo {
  position: absolute;
  top: clamp(1.1rem, 2vw, 1.4rem);
  right: clamp(1.1rem, 2vw, 1.4rem);
  width: clamp(4.75rem, 6vw, 5.5rem);
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(20, 74, 69, .16);
}

/* Bewerbungsprozess: ineinandergreifende Pfeile als Zeitstrahl */
.page-karriere-operative .op-steps {
  --step-gap: clamp(.75rem, 1.4vw, 1rem);
  --step-d: 26px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--step-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-karriere-operative .op-step {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1rem;
  min-width: 0;
}

/* Frühere Pfeile liegen oben, ihr Schatten fällt in die Kerbe des nächsten */
.page-karriere-operative .op-step:nth-child(1) { z-index: 4; }
.page-karriere-operative .op-step:nth-child(2) { z-index: 3; }
.page-karriere-operative .op-step:nth-child(3) { z-index: 2; }
.page-karriere-operative .op-step:nth-child(4) { z-index: 1; }

.page-karriere-operative .op-step-arrow {
  --arrow-bg: #fff;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 5.25rem;
  /* Spitze ragt bis in die Kerbe des nächsten Pfeils (7px Fuge) */
  margin-right: calc(-1 * (var(--step-gap) + var(--step-d)) + 7px);
  padding: 0 calc(var(--step-d) + .9rem) 0 calc(var(--step-d) + 1.1rem);
  color: var(--color-dark-deep);
  filter: drop-shadow(0 10px 16px rgba(20, 74, 69, .18));
}

.page-karriere-operative .op-step-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--arrow-bg);
  clip-path: polygon(0 0, calc(100% - var(--step-d)) 0, 100% 50%, calc(100% - var(--step-d)) 100%, 0 100%, var(--step-d) 50%);
}

.page-karriere-operative .op-step:first-child .op-step-arrow { padding-left: 1.35rem; }
.page-karriere-operative .op-step:first-child .op-step-arrow::before {
  clip-path: polygon(0 0, calc(100% - var(--step-d)) 0, 100% 50%, calc(100% - var(--step-d)) 100%, 0 100%);
}
.page-karriere-operative .op-step:last-child .op-step-arrow { margin-right: 0; }

.page-karriere-operative .op-step:nth-child(1) .op-step-arrow { --arrow-bg: color-mix(in srgb, #fff 55%, var(--v3-green)); }
.page-karriere-operative .op-step:nth-child(2) .op-step-arrow { --arrow-bg: color-mix(in srgb, #fff 75%, var(--v3-green)); }
.page-karriere-operative .op-step:nth-child(3) .op-step-arrow { --arrow-bg: #fff; }
.page-karriere-operative .op-step:nth-child(4) .op-step-arrow {
  --arrow-bg: var(--color-dark-deep);
  color: #fff;
}

.page-karriere-operative .op-step-num {
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  font-weight: 800;
  font-variation-settings: "wght" 800;
  line-height: 1;
  letter-spacing: -.03em;
}

.page-karriere-operative .op-step-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--v3-teal);
  color: #fff;
  transition: transform .55s var(--ease-spring, ease);
}

.page-karriere-operative .op-step:nth-child(4) .op-step-ico { background: var(--v3-orange); }
.page-karriere-operative .op-step-ico .ico { width: 1.35rem; height: 1.35rem; }
.page-karriere-operative .op-step:hover .op-step-ico { transform: rotateY(180deg); }

.page-karriere-operative .op-step-card {
  box-sizing: border-box;
  height: 100%;
  padding: 1.2rem 1.25rem 1.35rem;
  border-radius: 22px;
  background: color-mix(in srgb, #fff 78%, var(--v3-green));
  border: 1px solid rgba(20, 74, 69, .14);
  box-shadow: 0 12px 30px rgba(20, 74, 69, .14);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.page-karriere-operative .op-step:hover .op-step-card {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(20, 74, 69, .2);
}

.page-karriere-operative .op-step-title {
  margin: 0 0 .45rem;
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  font-weight: 800;
  font-variation-settings: "wght" 800;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--color-dark-deep);
}

.page-karriere-operative .op-step-text {
  margin: 0;
  font-size: .94rem;
  line-height: 1.55;
  color: rgba(20, 74, 69, .85);
}

/* Schmal: Pfeile zeigen nach unten und bilden links eine durchgehende Zeitleiste */
@media (max-width: 900px) {
  .page-karriere-operative .op-steps {
    --step-d: 18px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--step-gap);
  }
  .page-karriere-operative .op-step {
    grid-template-columns: 4.25rem minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 0 .9rem;
  }
  .page-karriere-operative .op-step-arrow,
  .page-karriere-operative .op-step:first-child .op-step-arrow {
    flex-direction: column;
    justify-content: flex-start;
    gap: .6rem;
    min-height: 0;
    margin-right: 0;
    margin-bottom: calc(-1 * (var(--step-gap) + var(--step-d)) + 7px);
    padding: calc(var(--step-d) + .85rem) 0 calc(var(--step-d) + .6rem);
  }
  .page-karriere-operative .op-step:first-child .op-step-arrow { padding-top: 1rem; }
  .page-karriere-operative .op-step:last-child .op-step-arrow { margin-bottom: 0; }
  .page-karriere-operative .op-step-arrow::before {
    clip-path: polygon(0 0, 50% var(--step-d), 100% 0, 100% calc(100% - var(--step-d)), 50% 100%, 0 calc(100% - var(--step-d)));
  }
  .page-karriere-operative .op-step:first-child .op-step-arrow::before {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--step-d)), 50% 100%, 0 calc(100% - var(--step-d)));
  }
  .page-karriere-operative .op-step-num { font-size: 1.6rem; }
  .page-karriere-operative .op-step-ico { width: 2.4rem; height: 2.4rem; }
  .page-karriere-operative .op-step-ico .ico { width: 1.15rem; height: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-karriere-operative .op-step:hover .op-step-ico,
  .page-karriere-operative .op-step:hover .op-step-card,
  .page-karriere-operative .op-path-card:hover .op-path-media img { transform: none; }
}

.page-karriere-stellen .op-jobs {
  background: var(--section-grad-audience, linear-gradient(180deg, #f3faf6 0%, #eef7f2 100%));
}

.page-karriere-stellen .op-job-regions {
  display: grid;
  gap: 1rem;
  max-width: 56rem;
  margin: 0 auto;
}

.page-karriere-stellen .op-job-region {
  background: #fff;
  border: 1px solid rgba(23, 59, 54, 0.1);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(23, 59, 54, 0.06);
  overflow: visible;
}

.page-karriere-stellen .op-job-region > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 750;
  font-variation-settings: "wght" 750;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--color-dark-deep, #173b36);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 18px 18px 0 0;
}
.page-karriere-stellen .op-job-region > summary::-webkit-details-marker { display: none; }
.page-karriere-stellen .op-job-region > summary::after {
  content: "";
  width: .55rem;
  height: .55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s ease;
  flex: 0 0 auto;
  opacity: .7;
}
.page-karriere-stellen .op-job-region[open] > summary::after {
  transform: rotate(225deg);
}
.page-karriere-stellen .op-job-region > summary:hover {
  color: var(--v3-teal);
}

.page-karriere-stellen .op-job-region .onapply-career-page-container {
  padding: 0 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.page-karriere-stellen .onapply-career-page-container > select {
  display: block;
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 22rem;
  margin: 0;
  padding: .7rem .9rem;
  border: 1px solid rgba(23, 59, 54, 0.18);
  border-radius: 10px;
  background: #fff;
  color: var(--color-dark-deep, #173b36);
  font: inherit;
  font-weight: 600;
  appearance: auto;
}

.page-karriere-stellen .onapply-job-ad-list {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  clear: both;
}

.page-karriere-stellen .onapply-job-ad {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem 1rem;
  align-items: center;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(23, 59, 54, 0.1);
  border-radius: 14px;
  background: #f7fbf9;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.page-karriere-stellen .onapply-job-ad:hover {
  border-color: rgba(31, 111, 104, 0.35);
  background: #fff;
  box-shadow: 0 8px 22px rgba(23, 59, 54, 0.08);
}

.page-karriere-stellen .onapply-job-ad__title {
  color: var(--color-dark-deep, #173b36) !important;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  margin: 0 0 .25rem;
}

.page-karriere-stellen .onapply-job-ad__location {
  color: rgba(23, 59, 54, 0.68) !important;
  font-size: .9rem;
  margin: 0;
}

.page-karriere-stellen .onapply-job-ad__view-button {
  border: 1px solid rgba(31, 111, 104, 0.35) !important;
  color: var(--v3-teal) !important;
  background: transparent;
  border-radius: 999px;
  padding: .55rem .95rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.page-karriere-stellen .onapply-job-ad__view-button:hover,
.page-karriere-stellen .onapply-job-ad:hover .onapply-job-ad__view-button {
  background: var(--v3-teal) !important;
  border-color: var(--v3-teal) !important;
  color: #fff !important;
}

/* Statisch gerenderte Ausschreibungen (OnApply-Feeds, Stand siehe Einleitung) */
.page-karriere-stellen .op-job-region > summary > span:first-child { flex: 1; }
.page-karriere-stellen .op-job-count {
  flex: 0 0 auto;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--teal-ink);
  font-size: .8rem;
  font-weight: 700;
  font-variation-settings: "wght" 700;
  white-space: nowrap;
}
.page-karriere-stellen .onapply-job-ad[hidden] { display: none; }
.page-karriere-stellen .op-job-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
}
.page-karriere-stellen .op-job-filter label {
  font-size: .9rem;
  font-weight: 650;
  color: var(--ink-soft);
}
.page-karriere-stellen .op-job-filter select {
  width: 100%;
  max-width: 22rem;
  padding: .7rem .9rem;
  border: 1px solid rgba(23, 59, 54, 0.18);
  border-radius: 10px;
  background: #fff;
  color: var(--color-dark-deep, #173b36);
  font: inherit;
  font-weight: 600;
}
.page-karriere-stellen .op-job-filter output {
  font-size: .85rem;
  color: var(--ink-soft);
}
.page-karriere-stellen .op-job-portal,
.page-karriere-stellen .op-job-empty {
  margin: 0;
  font-size: .92rem;
  color: var(--ink-soft);
}
.page-karriere-stellen .op-job-portal a,
.page-karriere-stellen .op-job-empty a {
  color: var(--v3-teal);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-karriere .op-apply-hint {
  grid-template-columns: minmax(0, 1fr);
  max-width: 46rem;
}
.page-karriere .op-apply-hint .sa-request-copy h2 {
  max-width: 18ch;
}
.page-karriere .op-apply-hint .sa-request-copy p {
  max-width: 62ch;
}
.page-karriere .op-apply-hint .sa-request-copy a:not(.btn) {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-karriere .op-apply-hint .sa-request-contact a {
  text-decoration: none;
}
.page-karriere .op-apply-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1.25rem 0 0.35rem;
}
.page-karriere .op-apply-actions .btn {
  text-decoration: none;
}

@media (max-width: 640px) {
  .page-karriere-stellen .onapply-job-ad {
    grid-template-columns: 1fr;
  }
  .page-karriere-stellen .onapply-job-ad__view-button {
    justify-self: start;
  }
}

/* Führungskräfte-Übersicht: vier Einstiegswege als 2×2-Raster,
   breite Karten mit Icon links neben Titel, Punkten und Link */
.paths.paths--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1100px;
  margin-inline: auto;
}
.paths--four .path-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(1.1rem, 2vw, 1.6rem);
  align-items: start;
}
.paths--four .path-ico {
  grid-column: 1;
  grid-row: 1 / -1;
  margin: 0;
}
.paths--four .path-card > :not(.path-ico) { grid-column: 2; }
.paths--four .path-card h3 { margin-top: .35rem; }
.paths--four .path-card .card-link { justify-self: start; }
@media (max-width: 760px) {
  .paths.paths--four { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .paths--four .path-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .paths--four .path-ico { grid-row: auto; margin: 0 0 1.2rem; }
  .paths--four .path-card > :not(.path-ico) { grid-column: 1; }
  .paths--four .path-card h3 { margin-top: 0; }
}