/* =========================================================
   C032 Career Path Graphic
   Farben & Ma�e als CSS-Custom-Properties � hier �berschreiben!
   ========================================================= */

.ti-c032-career-path {
  --ti-c032-color-01-bg: #0e1b33;
  --ti-c032-color-01-text: #ffffff;
  --ti-c032-color-01-bg-step01: #404D61;
  --ti-c032-color-01-bg-step02: #586375;
  --ti-c032-color-01-bg-step03: #646E7F;
  --ti-c032-color-02-bg: #f7ea00;
  --ti-c032-color-02-text: #0e1b33;
  --ti-c032-color-02-bg-step01: #FFF776;
  --ti-c032-color-02-bg-step02: #FFF998;
  --ti-c032-color-02-bg-step03: #FFFBBB;
  --ti-c032-color-03-bg: #cfe4fb;
  --ti-c032-color-03-text: #0e1b33;
  --ti-c032-color-03-bg-step01: #DDEDFF;
  --ti-c032-color-03-bg-step02: #E6F1FF;
  --ti-c032-color-03-bg-step03: #EEF6FF;

  --ti-c032-overview-row-height: 320px;
  --ti-c032-expanded-height: 960px;
  --ti-c032-transition: 0.4s ease;
  --ti-c032-step-slide-duration: 0.5s; /* NEU */
  position: relative;
  width: 100%;
  overflow: hidden;
   background-color: var(--ti-c032-color-01-bg); /* Fallback statt weiß */
}

@media (max-width:1920px) {
  .ti-c032-career-path {
  --ti-c032-overview-row-height: 272px;
  --ti-c032-expanded-height: 816px;
  }
}

.ti-c032-career-path__step--01 { background-color: var(--ti-c032-color-01-bg); color: var(--ti-c032-color-01-text); }
.ti-c032-career-path__step--02 { background-color: var(--ti-c032-color-02-bg); color: var(--ti-c032-color-02-text); }
.ti-c032-career-path__step--03 { background-color: var(--ti-c032-color-03-bg); color: var(--ti-c032-color-03-text); }

/* ---------- Basis-Step (�bersicht) ---------- */
.ti-c032-career-path__step {
  position: relative;
  width: 100%;
  min-height: var(--ti-c032-overview-row-height);
  transition: min-height var(--ti-c032-transition);
  overflow: hidden;
}

.ti-c032-career-path__header-wrapper {
  padding: 75px clamp(20px, calc(11.56vw - 162.16px), 120px);
}

@media (max-width:1920px) {
  .ti-c032-career-path__header-wrapper {
    padding: 40px 60px;
  }
}

@media (max-width:1023px) {
  .ti-c032-career-path__header-wrapper {
    padding: 40px 40px;
  }
}

.ti-c032-career-path__header-row {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap:40px;
  width: 100%;
  height: auto;
}


.ti-c032-career-path__header-row:hover {
  background-color: transparent;
  color:inherit;
}
.ti-c032-career-path__header-row:focus {
  background-color: transparent;
  color:inherit;
}
.ti-c032-career-path__header-row:focus-visible {
  background-color: transparent;
  color:inherit;
  outline:none;
  box-shadow:none;
} 

.ti-c032-career-path__number {
  flex-shrink: 0;
  width:128px;
}

@media (max-width:1920px) {
  .ti-c032-career-path__number{
    width:90px;
  }
}

@media (max-width:1279px) {
  .ti-c032-career-path__number{
    width:66px;
  }
}



.ti-c032-career-path__heading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width:437px;
}

.ti-c032-career-path__heading-wrapper {
  display: flex;
  flex-direction: row;
  gap: 60px;
  flex-grow: 1;
}

@media (max-width:1920px) {
  .ti-c032-career-path__heading-wrapper {
    gap:30px;
  }
}

@media (max-width:1279px) {
  .ti-c032-career-path__heading-wrapper {
    gap:13px;
  }
}

@media (max-width:1023px) {
  .ti-c032-career-path__heading-wrapper {
    gap:36px;
  }
}



.ti-c032-career-path__title { margin: 0; }
.ti-c032-career-path__desc  { margin: 0; }

.ti-c032-career-path__toggle-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: #fff;
  transition:
    transform 300ms cubic-bezier(0, 0.25, 0.2, 1),
    opacity 140ms ease;
  position: relative;
  overflow: hidden;
}

/* NEU: Basiszustand für das SVG mit eigener Transition */
.ti-c032-career-path__toggle-icon svg {
  opacity: 1;
  transform: translate(0, 0);
  transition:
    transform 300ms cubic-bezier(0, 0.25, 0.2, 1),
    opacity 140ms ease;
  will-change: transform, opacity;
}

.ti-c032-career-path__toggle-icon:before {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 18px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10' viewBox='0 0 17 10' fill='none'%3E%3Cpath d='M10.4013 0C10.8013 0.8 11.2013 1.52 11.6013 2.16C12.0279 2.8 12.4546 3.37333 12.8813 3.88L0 3.87999L0 5.23999L12.8813 5.24C12.4546 5.74666 12.0279 6.32 11.6013 6.96C11.2013 7.6 10.8013 8.32 10.4013 9.12L11.4812 9.12C13.1346 7.22666 14.8813 5.78666 16.7213 4.8L16.7213 4.32C14.8813 3.36 13.1346 1.92 11.4813 0L10.4013 0Z' fill='%2310203A'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
  transform: translate(-54px, -50%);
  transition:
    transform 300ms cubic-bezier(0, 0.25, 0.2, 1),
    opacity 140ms ease;
  will-change: transform, opacity;
}

.ti-c032-career-path__header-row:hover .ti-c032-career-path__toggle-icon {
  background-color: #EDEDEE;
}

.ti-c032-career-path__header-row:hover .ti-c032-career-path__toggle-icon svg {
  opacity: 0;
  transform: translate(70px, -50%);
  /* transition kann hier weg, da bereits in der Basisregel definiert */
}

.ti-c032-career-path__header-row:hover .ti-c032-career-path__toggle-icon:before {
  opacity: 1;
  transform: translate(0, -50%);
  /* transition kann hier ebenfalls weg */
}

  .ti-c032-career-path__nav {
    display: none;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    left: clamp(20px, calc(11.56vw - 162.16px), 120px);
    bottom: 75px;
    pointer-events: none; /* Pfeile bleiben klickbar */
    z-index:20;
    opacity:0;
    transition: opacity 200ms ease;
  }

/* Nav-Buttons & Unterpunkte im Overview-Zustand ausgeblendet */
.ti-c032-career-path__items {
  display: none;
}

.ti-c032-career-path__nav-btn {
  all: unset;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: inherit;
   transition:
            transform 300ms cubic-bezier(0, 0.25, 0.2, 1),
            opacity 140ms ease;
  position: relative;
  overflow:hidden;
}

.ti-c032-career-path__nav-btn--up {
  transform: rotate(-90deg);
}
.ti-c032-career-path__nav-btn--down {
  transform: rotate(90deg);
}


.ti-c032-career-path__nav-btn svg {
  opacity: 1;
  transform: translate(0, 0);
  transition:
    transform 300ms cubic-bezier(0, 0.25, 0.2, 1),
    opacity 140ms ease;
  will-change: transform, opacity;
}

.ti-c032-career-path__nav-btn:before {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 18px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10' viewBox='0 0 17 10' fill='none'%3E%3Cpath d='M10.4013 0C10.8013 0.8 11.2013 1.52 11.6013 2.16C12.0279 2.8 12.4546 3.37333 12.8813 3.88L0 3.87999L0 5.23999L12.8813 5.24C12.4546 5.74666 12.0279 6.32 11.6013 6.96C11.2013 7.6 10.8013 8.32 10.4013 9.12L11.4812 9.12C13.1346 7.22666 14.8813 5.78666 16.7213 4.8L16.7213 4.32C14.8813 3.36 13.1346 1.92 11.4813 0L10.4013 0Z' fill='%2310203A'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
  transform: translate(-54px, -50%);
  transition:
    transform 300ms cubic-bezier(0, 0.25, 0.2, 1),
    opacity 140ms ease;
  will-change: transform, opacity;
}

.ti-c032-career-path__nav-btn:focus-visible {
  background-color: #fff;
      box-shadow:
      0 0 0 2px #10203a,
      0 0 0 6px #646e7f;
}

.ti-c032-career-path__nav-btn:hover, .ti-c032-career-path__nav-btn:focus { background-color: #EDEDEE; }

.ti-c032-career-path__nav-btn:hover svg {
  opacity: 0;
  transform: translate(70px, -50%);
  /* transition kann hier weg, da bereits in der Basisregel definiert */
}

.ti-c032-career-path__nav-btn:hover:before {
  opacity: 1;
  transform: translate(0, -50%);
  /* transition kann hier ebenfalls weg */
}

/* =========================================================
   EXPANDED STATE (ein Step ist aktiv)
   ========================================================= */

.ti-c032-career-path--expanded .ti-c032-career-path__step--hidden {
  display: none;
}

.ti-c032-career-path--expanded .ti-c032-career-path__step--active {
  display: flex;
  min-height: var(--ti-c032-expanded-height);
}

.ti-c032-career-path--expanded .ti-c032-career-path__step--active .ti-c032-career-path__header-wrapper {
  width:50%;
}
@media (max-width:1023px) {
  .ti-c032-career-path--expanded .ti-c032-career-path__step--active .ti-c032-career-path__header-wrapper {
  width:146px;
}
}


.ti-c032-career-path--expanded .ti-c032-career-path__step--active .ti-c032-career-path__toggle-icon {
  display: none;
}

/* ---------- Desktop / Tablet ab 744px ---------- */
@media (min-width: 744px) {

  .ti-c032-career-path--expanded .ti-c032-career-path__step--active .ti-c032-career-path__header-row {
    flex: 0 0 50%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    /* Im expanded State ist der Header NICHT klickbar � nur die Pfeile navigieren */
    pointer-events: none;
    cursor: default;
  }

  .ti-c032-career-path--expanded .ti-c032-career-path__nav {
    display: flex;
    opacity: 1;
    pointer-events: auto;
  }

  .ti-c032-career-path--expanded .ti-c032-career-path__step--active .ti-c032-career-path__items {
    display: flex;
    flex-direction: column;
    flex: 1;
    width:50%;
  }

  .ti-c032-career-path__item {
    flex: 1;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 75px clamp(20px, calc(11.56vw - 162.16px), 120px) 75px 90px;
    opacity: 0;
    transform: translateX(120px);
    animation: ti-c032-slide-in 0.5s ease forwards;
    height: var(--ti-c032-overview-row-height);
  }

  /* Staffelung + leichte Aufhellung von oben nach unten */
  .ti-c032-career-path__item:nth-child(1) { animation-delay: 0.05s; }
  .ti-c032-career-path__item:nth-child(2) { animation-delay: 0.15s; }
  .ti-c032-career-path__item:nth-child(3) { animation-delay: 0.25s; }

    /* -------------------------------------------------------
     Gerichteter Step-Wechsel (nur Desktop, per Pfeil-Klick)
     ------------------------------------------------------- */
  .ti-c032-career-path--transitioning {
    /* Fixe Höhe nötig, da absolut positionierte Kinder
       sonst keine Höhe an den Wrapper weitergeben */
    height: var(--ti-c032-expanded-height);
  }

  .ti-c032-career-path__step--transition-old,
  .ti-c032-career-path__step--transition-new {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform var(--ti-c032-step-slide-duration) ease;
    will-change: transform;
  }

}

  .ti-c032-career-path__step--01 .ti-c032-career-path__item:nth-child(1) { background-color: var(--ti-c032-color-01-bg-step01);}
  .ti-c032-career-path__step--01 .ti-c032-career-path__item:nth-child(2) { background-color: var(--ti-c032-color-01-bg-step02);}
  .ti-c032-career-path__step--01 .ti-c032-career-path__item:nth-child(3) { background-color: var(--ti-c032-color-01-bg-step03);}
  .ti-c032-career-path__step--02 .ti-c032-career-path__item:nth-child(1) { background-color: var(--ti-c032-color-02-bg-step01);}
  .ti-c032-career-path__step--02 .ti-c032-career-path__item:nth-child(2) { background-color: var(--ti-c032-color-02-bg-step02);}
  .ti-c032-career-path__step--02 .ti-c032-career-path__item:nth-child(3) { background-color: var(--ti-c032-color-02-bg-step03);}
  .ti-c032-career-path__step--03 .ti-c032-career-path__item:nth-child(1) { background-color: var(--ti-c032-color-03-bg-step01);}
  .ti-c032-career-path__step--03 .ti-c032-career-path__item:nth-child(2) { background-color: var(--ti-c032-color-03-bg-step02);}
  .ti-c032-career-path__step--03 .ti-c032-career-path__item:nth-child(3) { background-color: var(--ti-c032-color-03-bg-step03);}

@keyframes ti-c032-slide-in {
  to { opacity: 1; transform: translateX(0); }
}

.ti-c032-career-path__item-icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ti-c032-career-path__item-icon img { width: 100%; height: 100%; object-fit: contain; }

.ti-c032-career-path__item-content { display: flex; flex-direction: column; gap: 5px; }
.ti-c032-career-path__item-title  { margin: 0; }
.ti-c032-career-path__item-desc   { margin: 0; }

/* ===== Return choreography ===== */

/* Untersteps Exit (stagger) */
.ti-c032-career-path__step--items-exit .ti-c032-career-path__item {
  animation: ti-c032-item-out-right 0.32s ease forwards !important;
}
.ti-c032-career-path__step--items-exit .ti-c032-career-path__item:nth-child(1) { animation-delay: 0.05s; }
.ti-c032-career-path__step--items-exit .ti-c032-career-path__item:nth-child(2) { animation-delay: 0.15s; }
.ti-c032-career-path__step--items-exit .ti-c032-career-path__item:nth-child(3) { animation-delay: 0.25s; }

@keyframes ti-c032-item-out-right {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(80px); }
}

/* ---------- Return zur Übersicht ---------- */

/* Wrapper bleibt während des Returns höhenstabil (3 × row === expanded) */
.ti-c032-career-path--returning {
  overflow: hidden;
}

/* Steps bleiben im Flow – nur transform/opacity werden per JS animiert.
   KEIN position:absolute, KEIN transform hier (würde JS überschreiben!) */
.ti-c032-career-path__step--returning {
  will-change: transform, opacity;
}

/* min-height-Transition während des Returns deaktivieren (sonst Ruckler) */
.ti-c032-career-path--returning .ti-c032-career-path__step {
  transition: none;
}

@media (max-width:1920px) {
   .ti-c032-career-path__item {
    padding: 40px 60px;
    gap:20px;
  }
   .ti-c032-career-path__nav {
    bottom:40px;
    left:60px;
   }
}
@media (max-width:1023px) {
   .ti-c032-career-path__item {
    padding: 40px 40px;
  }
  .ti-c032-career-path--expanded .ti-c032-career-path__step--active .ti-c032-career-path__items {
    width:auto;
  }
 .ti-c032-career-path__nav {
    bottom:40px;
    left:48px;
   }
   .ti-c032-career-path--expanded .ti-c032-career-path__step--active .ti-c032-career-path__heading {
    display:none;
   }
   .ti-c032-career-path--expanded .ti-c032-career-path__step--active .ti-c032-career-path__number {
    display:flex;
    justify-content: center;
   }
}


/* =========================================================
   MOBILE ACCORDION � bis 743px
   ========================================================= */
@media (max-width: 743px) {

  .ti-c032-career-path {
  --ti-c032-overview-row-height: 220px;
  --ti-c032-expanded-height: 660px;
  }

  .ti-c032-career-path__nav { display: none !important; }


  .ti-c032-career-path__header-wrapper {
    padding:20px;
    width:100%;
    gap:20px;
    flex-direction: column;
  }

  .ti-c032-career-path--expanded .ti-c032-career-path__step--active .ti-c032-career-path__heading {
    display:flex;
   }

   .ti-c032-career-path--expanded .ti-c032-career-path__step--active .ti-c032-career-path__header-wrapper {
    width:auto;
    height:220px;
   }

   .ti-c032-career-path--expanded .ti-c032-career-path__step--active .ti-c032-career-path__number {
    display:inline;
   }

   .ti-c032-career-path--expanded .ti-c032-career-path__step--hidden {
    display:flex;
   }

   .ti-c032-career-path--expanded  .ti-c032-career-path {
    height: auto;
  }


  .ti-c032-career-path__number{
    width:55px;
  }
 

  .ti-c032-career-path__heading {
    width:auto;
  }


  .ti-c032-career-path__header-row {
    pointer-events: auto !important;
    cursor: pointer !important;
    height: auto;
  }

  .ti-c032-career-path--expanded .ti-c032-career-path__step--active {
    display: block;
    min-height: auto;
  }

  .ti-c032-career-path--expanded .ti-c032-career-path__step--active .ti-c032-career-path__header-row {
    flex-direction: row;
    height: auto;
  }

  .ti-c032-career-path--expanded .ti-c032-career-path__step--active .ti-c032-career-path__toggle-icon {
    display: flex;
    transform: rotate(90deg);
  }

  .ti-c032-career-path--expanded .ti-c032-career-path__step--active .ti-c032-career-path__items {
    display: block;
  }

  .ti-c032-career-path__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 20px 40px 20px;
    animation: none;
    opacity: 1;
    transform: none;
    flex-direction: column;
  }

  .ti-c032-career-path__item-icon {
    width:60px;
    height:60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ti-c032-career-path__item,
  .ti-c032-career-path__step--items-exit .ti-c032-career-path__item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ti-c032-career-path__step {
    transition: none !important;
  }
}