/* =============================================
   SETTINGS — alle wichtigen Werte zentral
   ============================================= */
.pri-pipeline-wrap {

  /* --- Farben: Text & Hintergrund --- */
  --color-text:           var(--awb-color8);        /* Haupt-Textfarbe */
  --color-accent:         #00908E;                  /* Teal-Akzent */
  --color-border:         hsla(var(--awb-color5-h),var(--awb-color5-s),var(--awb-color5-l),calc(var(--awb-color5-a) - 88%));

  --row-bg-closed:        #f7f8fc;                  /* Hintergrund geschlossene Zeile */
  --row-bg-open:          #F2F9FC;                  /* Hintergrund geöffnete Zeile */
  --row-bg-hover:         #F2F9FC;                  /* Hintergrund Hover */
  --row-text-open:        var(--color-accent);        /* Textfarbe geöffnet & Hover */

  --phases-bg-closed:     rgba(0, 100, 150, 0.04); /* dezente Tönung der Phases-Spalte */

  --header-bg:            transparent;              /* Tabellen-Header-Hintergrund */
  --detail-bg:            var(--row-bg-open);       /* Detail-Bereich Hintergrund */

  /* --- Farben: Bar --- */
  --bar-color-start:      #00E3BA;
  --bar-color-end:        #00908E;
  --bar-arrow-bg:         var(--awb-color4);        /* Pfeilspitzen-Farbe (Avada) */
  --bar-stripe-opacity:   0.12;                     /* Deckkraft der animierten Streifen */
  --bar-stripe-size:      28px;                     /* Breite der Streifen */
  --bar-animation-speed:  2s;                       /* Geschwindigkeit der Streifen-Animation */

  /* --- Grid-Spalten (Desktop) --- */
  --col-program:          280px;                    /* Program + Target */
  --col-indication:       1fr;
  --col-phases:           1.4fr;

  /* --- Typografie: Größen --- */
  --fs-header-label:      0.7rem;                   /* Tabellen-Header-Labels */
  --fs-row-text:          0.95rem;                  /* Zeilen-Text */
  --fs-program-name:      0.95rem;                  /* Programm-Name */
  --fs-target-label:      0.85rem;                  /* Target-Subtitle */
  --fs-detail-text:       1rem;                     /* Detail-Text */
  --fs-label-mobile:      0.6rem;                   /* Mobile Phase-Labels */
  --fs-toggle-icon:       1.33rem;                  /* Toggle-Pfeil-Icon */

  /* --- Typografie: Gewichte --- */
  --fw-header-label:      600;
  --fw-program-name:      600;
  --fw-target-label:      400;
  --fw-row-text:          400;
  --fw-detail-text:       400;

  /* --- Typografie: Sonstiges --- */
  --letter-spacing-label: 0.07em;
  --detail-line-height:   1.7;

  /* --- Abstände --- */
  --cell-padding-x:         16px;
  --cell-padding-y-header:  10px;
  --cell-padding-y-row:     16px;
  --row-min-height:         64px;
  --row-spacing:            6px;                    /* Abstand zwischen Zeilen */
  --detail-padding-left:    calc(var(--col-program) + var(--cell-padding-x));
  --detail-padding-bottom:  24px;
  --detail-padding-top:     16px;

  /* --- Bar --- */
  --bar-height:             24px;
  --bar-arrow-size:         12px;

  /* --- Icon --- */
  --icon-size:              2.2rem;                 /* Feste Breite/Höhe des Toggle-Icons */
  --icon-border:            1px solid var(--color-border); /* Rahmen des Toggle-Icons */
  --icon-background:        white;                /* Hintergrund des Toggle-Icons (Pfeil) */
  --icon-rotation-open:     90deg;                  /* Rotation des Pfeils im offenen Zustand */
  --icon-transition:        0.3s ease;              /* Übergangsanimation */
}

/* ===== CONTAINER ===== */
.pri-pipeline-wrap {
  font-family: inherit;
  width: 100%;
}

/* =============================================
   TABELLEN-HEADER
   ============================================= */
.pri-pipeline-header {
  display: grid;
  grid-template-columns: var(--col-program) var(--col-indication) var(--col-phases);
  background-color: var(--header-bg);
}

.pri-pipeline-header .ph-col {
  padding: var(--cell-padding-y-header) var(--cell-padding-x);
  font-size: var(--fs-header-label);
  font-weight: var(--fw-header-label);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text);
  white-space: nowrap;
}

.pri-pipeline-header .ph-phases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
}
.pri-pipeline-header .ph-phases span {
  padding: var(--cell-padding-y-header) 4px;
  font-size: var(--fs-header-label);
  font-weight: var(--fw-header-label);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text);
  white-space: nowrap;
  text-align: center;
}

/* =============================================
   AVADA TOGGLE OVERRIDES
   ============================================= */

.pri-pipeline-wrap .panel-group {
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--row-spacing);
}

.pri-pipeline-wrap .fusion-panel {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 6px !important;
  overflow: hidden;
}

.pri-pipeline-wrap .panel-heading {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.pri-pipeline-wrap .panel-title {
  font-size: inherit !important;
}

.pri-pipeline-wrap .fusion-panel .panel-collapse {
  border-top: 1px solid var(--color-border) !important;
}

/* ===== A-ELEMENT = 3-SPALTEN-GRID =====
   Item 1: fusion-toggle-icon-wrapper (Program-Spalte)
   Item 2: pri-th-indication          via display:contents
   Item 3: pri-th-phases              via display:contents
   ============================================= */
.pri-pipeline-wrap .panel-title > a {
  display: grid !important;
  grid-template-columns: var(--col-program) var(--col-indication) var(--col-phases) !important;
  align-items: stretch !important;
  min-height: var(--row-min-height);
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  color: var(--color-text) !important;
  background-color: var(--row-bg-closed) !important;
  transition: background-color 0.3s ease, color 0.2s ease;
}

/* Hover: Hintergrund + Akzentfarbe */
.pri-pipeline-wrap .panel-title > a:hover {
  background-color: var(--row-bg-hover) !important;
  text-decoration: none !important;
  color: var(--row-text-open) !important;
}
.pri-pipeline-wrap .panel-title > a:hover .pri-th-program,
.pri-pipeline-wrap .panel-title > a:hover .pri-th-indication {
  color: var(--row-text-open);
}
.pri-pipeline-wrap .panel-title > a:hover .pri-th-target {
  color: var(--row-text-open);
}
.pri-pipeline-wrap .panel-title > a:hover .pri-th-phases {
  background-color: transparent;  /* Hover-Farbe der a-Zeile durchscheinen lassen */
}

/* Geöffnete Zeile + Übergangsanimation (.collapsing = Bootstrap während open/close)
   aria-expanded wechselt sofort beim Klick → Farben ändern sich ohne Verzögerung */
.pri-pipeline-wrap .panel-title > a[aria-expanded="true"],
.pri-pipeline-wrap .fusion-panel:has(.panel-collapse.in) .panel-title > a,
.pri-pipeline-wrap .fusion-panel:has(.panel-collapse.collapsing) .panel-title > a {
  background-color: var(--row-bg-open) !important;
  color: var(--row-text-open) !important;
}
.pri-pipeline-wrap .panel-title > a[aria-expanded="true"]:hover,
.pri-pipeline-wrap .fusion-panel:has(.panel-collapse.in) .panel-title > a:hover,
.pri-pipeline-wrap .fusion-panel:has(.panel-collapse.collapsing) .panel-title > a:hover {
  background-color: var(--row-bg-open) !important;
}

.pri-pipeline-wrap .panel-title > a[aria-expanded="true"] .pri-th-program,
.pri-pipeline-wrap .panel-title > a[aria-expanded="true"] .pri-th-indication,
.pri-pipeline-wrap .fusion-panel:has(.panel-collapse.in) .pri-th-program,
.pri-pipeline-wrap .fusion-panel:has(.panel-collapse.in) .pri-th-indication,
.pri-pipeline-wrap .fusion-panel:has(.panel-collapse.collapsing) .pri-th-program,
.pri-pipeline-wrap .fusion-panel:has(.panel-collapse.collapsing) .pri-th-indication {
  color: var(--row-text-open);
}
.pri-pipeline-wrap .panel-title > a[aria-expanded="true"] .pri-th-target,
.pri-pipeline-wrap .fusion-panel:has(.panel-collapse.in) .pri-th-target,
.pri-pipeline-wrap .fusion-panel:has(.panel-collapse.collapsing) .pri-th-target {
  color: var(--row-text-open);
}
.pri-pipeline-wrap .panel-title > a[aria-expanded="true"] .pri-th-phases,
.pri-pipeline-wrap .fusion-panel:has(.panel-collapse.in) .pri-th-phases,
.pri-pipeline-wrap .fusion-panel:has(.panel-collapse.collapsing) .pri-th-phases {
  background-color: transparent;
}

/* Icon-Rotation auch während Animation */
.pri-pipeline-wrap .fusion-panel:has(.panel-collapse.collapsing) .inactive-icon {
  transform: rotate(var(--icon-rotation-open));
}

/* ===== ICON-WRAPPER = SPALTE 1 ===== */
.pri-pipeline-wrap .fusion-toggle-icon-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: var(--cell-padding-y-row) var(--cell-padding-x) !important;
  color: var(--color-text) !important;
}

/* active-icon dauerhaft ausblenden — nur inactive-icon wird rotiert */
.pri-pipeline-wrap .fusion-toggle-icon-wrapper .active-icon {
  display: none !important;
}

.pri-pipeline-wrap .fusion-toggle-icon-wrapper .inactive-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: var(--fs-toggle-icon) !important;
  color: var(--awb-color4) !important;
  flex-shrink: 0;
  border: var(--icon-border);
  background-color: var(--icon-background);
  border-radius: 50%;
  transform: rotate(0deg);
  transition: transform var(--icon-transition), color var(--icon-transition), border-color var(--icon-transition);
}

.pri-pipeline-wrap .fusion-toggle-icon-wrapper .inactive-icon:before {
  transform: translateX(1px);
}


/* Offen: Icon 90° rotieren */
.pri-pipeline-wrap .panel-title > a[aria-expanded="true"] .inactive-icon,
.pri-pipeline-wrap .fusion-panel:has(.panel-collapse.in) .inactive-icon {
  transform: rotate(var(--icon-rotation-open));
}

/* Program-Name + Target gestapelt */
.pri-pipeline-wrap .pri-program-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pri-pipeline-wrap .pri-th-program {
  font-size: var(--fs-program-name);
  font-weight: var(--fw-program-name);
  color: var(--color-text);
  line-height: 1.2;
  transition: color 0.2s ease;
}

.pri-pipeline-wrap .pri-th-target {
  font-size: var(--fs-target-label);
  font-weight: var(--fw-target-label);
  color: var(--color-text);
  opacity: 0.8;
  line-height: 1.2;
  transition: color 0.2s ease;
}

/* ===== TOGGLE-HEADING = display:contents =====
   Kinder = Grid-Items 2 und 3 */
.pri-pipeline-wrap .fusion-toggle-heading {
  display: contents !important;
  padding: 0 !important;
  font-size: inherit !important;
}

/* ===== INDICATION (Grid-Item 2) ===== */
.pri-pipeline-wrap .pri-th-indication {
  display: flex;
  align-items: center;
  padding: var(--cell-padding-y-row) var(--cell-padding-x);
  font-size: var(--fs-row-text);
  font-weight: var(--fw-row-text);
  color: var(--color-text);
  transition: color 0.2s ease;
}

/* ===== PHASES (Grid-Item 3) =====
   Dezente eigene Hintergrundfarbe + volle Zeilenhöhe
   Vertikale Striche (inkl. linker Strich bei Discovery-Start)  */
.pri-pipeline-wrap .pri-th-phases {
  display: flex;
  align-items: center;
  padding: var(--cell-padding-y-row) 0;
  background-color: var(--phases-bg-closed);
  background-image: repeating-linear-gradient(
    to right,
    var(--color-border) 0px,
    var(--color-border) 1px,
    transparent 1px,
    transparent 25%
  );
  transition: background-color 0.3s ease;
}

/* ===== PHASE BAR ===== */
.pr-phases-inner {
  position: relative;
  width: 100%;
  height: var(--bar-height);
}

/* Animierte Streifen: transform statt background-position → nur Composite, kein Paint */
@keyframes pri-bar-stripes {
  from { transform: translateX(calc(-1 * var(--bar-stripe-size))); }
  to   { transform: translateX(0); }
}

.pri-bar {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: var(--bar-height);
  width: 0;
  /* Pfeilform via clip-path — gibt ::after frei für Fade-Overlay */
  clip-path: polygon(
    0 0,
    calc(100% - var(--bar-arrow-size)) 0,
    100% 50%,
    calc(100% - var(--bar-arrow-size)) 100%,
    0 100%
  );
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width;
  background: linear-gradient(90deg, var(--bar-color-start) 0%, var(--bar-color-end) 100%);
}

/* Streifen-Overlay als ::before — animiert via transform (GPU-composited)
   left/right negativ → ::before breiter als Bar, sodass bei translateX(-stripe-size)
   keine Lücke am rechten Rand entsteht; clip-path des Parents schneidet den Überhang */
.pri-bar::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--bar-stripe-size));
  right: calc(-1 * var(--bar-stripe-size));
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, var(--bar-stripe-opacity)) 0px,
    rgba(255, 255, 255, var(--bar-stripe-opacity)) 10px,
    transparent 10px,
    transparent 20px
  );
  background-size: var(--bar-stripe-size) var(--bar-stripe-size);
  animation: pri-bar-stripes var(--bar-animation-speed) linear infinite;
  will-change: transform;
}

/* Fade-Overlay: blendet Streifen am Pfeilende aus */
.pri-bar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 70px;
  background: linear-gradient(to right, transparent 0%, var(--bar-color-end) 100%);
  pointer-events: none;
}

/* ===== MOBILE PHASE-LABELS ===== */
.pr-phase-mobile-labels {
  display: none;
}

/* ===== DETAIL (panel-body) ===== */
.pri-pipeline-wrap .panel-body {
  padding: var(--detail-padding-top) var(--cell-padding-x) var(--detail-padding-bottom) var(--detail-padding-left) !important;
  font-size: var(--fs-detail-text);
  font-weight: var(--fw-detail-text);
  line-height: var(--detail-line-height);
  color: var(--color-text);
  background-color: var(--detail-bg);
  border-top: none !important;
  margin: 0 !important;
}

.pri-pipeline-wrap .panel-body p             { margin: 12px 0 0; }
.pri-pipeline-wrap .panel-body p:first-child { margin-top: 0; }
.pri-pipeline-wrap .panel-body ul            { margin: 8px 0 0; padding-left: 20px; }
.pri-pipeline-wrap .panel-body ul li         { margin-bottom: 4px; }
.pri-pipeline-wrap .panel-body a             { color: var(--color-accent); }
.pri-pipeline-wrap .panel-body a:hover       { text-decoration: underline; }

/* =============================================
   RESPONSIVE (≤ 992px → Card-Layout)
   ============================================= */

@media (max-width: 992px) {

  .pri-pipeline-header {
    display: none;
  }

  .pri-pipeline-wrap .panel-title > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: var(--cell-padding-y-row) var(--cell-padding-x) !important;
    gap: 16px;
    min-height: unset !important;
  }

  .pri-pipeline-wrap .fusion-toggle-heading {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .pri-pipeline-wrap .fusion-toggle-icon-wrapper {
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 0 !important;
    width: 100%;
  }

  .pri-pipeline-wrap .pri-th-indication {
    display: block;
    align-self: stretch;
    padding: 0;
    font-size: 1rem;
    opacity: 0.85;
  }

  .pri-pipeline-wrap .pri-th-phases {
    align-self: stretch;
    display: block;
    padding: 4px 0 0;
    background-color: transparent;
    background-image: none;
  }

  .pr-phases-inner {
    --bar-height: 16px;
  }

  .pri-bar::after {
    --bar-arrow-size: 10px;
  }

  .pr-phase-mobile-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
  }
  .pr-phase-mobile-labels span {
    font-size: var(--fs-label-mobile);
    font-weight: var(--fw-header-label);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
    flex: 1;
    text-align: center;
  }
  .pr-phase-mobile-labels span:first-child { text-align: left; }
  .pr-phase-mobile-labels span:last-child  { text-align: right; }

  .pri-pipeline-wrap .panel-body {
    padding: 12px var(--cell-padding-x) var(--cell-padding-x) var(--cell-padding-x) !important;
  }
}