:root {
  --timeline-background: #E2BB78;
}

.timeline-wrapper {
  display: grid;
  grid-template-columns: 3% 1fr;
  width: 100%;
  container-type: inline-size;
  overflow: visible;
  margin-bottom: 4rem;

  .timeline-bar {
    height: 100%;
    width: 100%;
    background-color: var(--timeline-background);
    border: solid var(--logo-yellow);
    border-width: 0.8cqw;
    border-radius: 3cqw;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
  }

  .timeline-items {
    width: 90%;
    margin: auto;
    .month {

      background-color: var(--timeline-background);
      padding: 0 20%;
      margin: 0 0 1rem;
      border-radius: 0.4rem;
      box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
      position: relative;

      div {
        position: relative;
        text-align: center;
        margin: auto;
        pointer-events: none;

        span {
          position: relative;
          z-index: 1;
          background-color: var(--timeline-background);
          padding: 0 0.7rem;
          font-size: clamp(0.5rem, 1.2vw + .5rem, 2rem);
          font-weight: 600;
        }
      }

      div::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 5%;
        background-color: black;
        transform: translateY(-50%);
        z-index: 0;
      }

      img {
        position: absolute;
        right: 15px;
        top: 30%;
        height: 40%;
        width: auto;
        transition: transform 0.3s ease;
        filter: invert(100%);
        pointer-events: none;
      }

    }

  }

}

.monthly-interview-wrapper {
  display: block;
  container-type: inline-size;
}

.month-wrapper.toggled {
  .month img {
    transform: rotate(180deg);
  }
  .monthly-interview-wrapper {
    display: none;
  }
}

.interview-wrapper {
  position: relative;
  width: 100%;
  height: fit-content;
  margin-bottom: 1rem;

  .pointer-svg {
    position: absolute;
    left: -8.2%;
    bottom: 0%;
  }

  .interview-svg {
    position: relative;
    width: 100%;
    top: 0;
    z-index: 0;


  }

  .interviewee-picture {
    position: absolute;
    width: 23%;
    z-index: 1;
    left: 10%;
    top: 7%;
    height: 82%;
    border-radius: 2cqw;
    object-fit: cover;
  }

  .tape-svg {
    z-index: 2;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
  }

  .more-info-svg {
    z-index: 1;
    position: absolute;
    right: 1%;
    top: 70%;
    width: 20%;
    transition: scale 0.3s ease;
  }
  .more-info-svg:hover {
    transform: scale(1.03);
  }

  .interviewee-short {
    position: absolute;
    z-index: 1;
    top: 7%;
    left: 37%;
    width: 58%;

    .interviewee-name {
      margin: 0;
      font-size: 2.8cqw;
      font-weight: 550;
      line-height: 1;
      text-align: left;
    }

    .interviewee-organization {
      font-size: 2.5cqw;
      line-height: 1;
      text-align: left;
    }

    .interviewee-text {
      position: relative;
      top: 20%;
      line-height: 1.2;
      font-size: 2.3cqw;
    }
  }

  .phone-interview-svg {
    display: none;
  }

  .interviewee-desc-phone {
    display: none;
  }

  .interviewee-text-phone {
    display: none;
  }

  .stakeholder-icon {
    position: absolute;
    top: 0%;
    z-index: 1;
    width: 10%;
    transition: scale 0.3s ease;

    img {
      width: 100%;
    }
  }

  .icon2 {
    right: 2%;
  }

  .icon1 {
    right: 8%;
  }

  .icon3 {
    right: 14%;
  }

  .icon-tooltip {
    position: absolute;
    top: 22%;
    display: none;
    right: 3%;
    width: 20%;
    text-align: center;
    font-size: 2cqw;
  }

  .stakeholder-icon:hover {
    transform: scale(1.1);

  }

  .stakeholder-icon:hover + .icon-tooltip {
    display: unset;
  }

  .interview-fulltext {
    display: none;
  }
}

@media (max-width: 750px) {
  .interviewee-short {
    display: none;
  }

  .interview-svg {
    display: none;
  }

  .interview-wrapper {
    height: 211cqw !important;
  }

  .phone-interview-svg {
    display: unset !important;
  }

  .pointer-svg {
    bottom: 1% !important;
    left: -8.7% !important;
  }

  .tape-svg {
    width: 135% !important;
  }

  .more-info-svg {
    top: 87% !important;
    width: 75% !important;
    right: 9% !important;
  }

  .interviewee-picture {
    width: 35% !important;
    left: 11% !important;
    top: 2% !important;
    height: 20% !important;
  }

  .interviewee-desc-phone {
    display: unset !important;
    position: absolute;
    top: 9%;
    left: 51%;
    width: 44%;
    height: 14%;
    overflow: auto;

    .interviewee-name-phone {
      font-size: 8cqw;
      line-height: 1;
      margin: 0;
      text-align: left;
    }
    .interviewee-organization-phone {
      font-size: 4cqw;
      text-align: left;
    }
  }

  .interviewee-text-phone {
    display: unset !important;
    position: absolute;
    top: 23%;
    left: 11%;
    width: 84%;
    height: 62%;
    font-size: 6cqw;
    overflow: auto;
  }




  .stakeholder-icon {
    width: 17% !important;
  }

  .icon2 {
    right: 3% !important;
  }

  .icon1 {
    right: 17% !important;
  }

  .icon3 {
    right: 33% !important;
  }

  .icon-tooltip {
    top: 6% !important;
    right: 3% !important;
    width: 48% !important;
    font-size: 4cqw !important;
  }
}

#interview-overlay-close {
  border: solid grey !important;
  background-color: lightgray !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

#interview-overlay-content {
  max-height: 80vh !important;
  p {
    text-align: justify;
  }
}

.ihp-part-wrapper {

  .ihp-part-title {

    width: 100%;
    color: white;
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0;
    border-radius: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    .ihp-part-icon {
      float: left;
      height: 2.7em;
      width: auto;
      display: block;
      margin-right: auto;
      margin-left: 1%;
    }

    span {
      margin: auto;
      text-align: center;
      font-size: clamp(1rem, 1.2vw + .9rem, 2rem);
    }

    .ihp-part-toggle-arrow {
      float: right;
      height: 0.7em;
      width: auto;
      display: block;
      margin-left: auto;
      margin-right: calc(1% + 20px);
      transform: rotate(180deg);
      transition: transform 0.3s ease;
    }

  }

  .ihp-part-content {
    display: none;
  }

}

.ihp-part-wrapper.open {

  .ihp-part-toggle-arrow {
    transform: rotate(0deg);
  }


  .ihp-part-content {
    display: block;
  }

}

#ihp-amr-antibiotics-history {background-color: #E2BB78; !important}
#ihp-discovery-void-icon {background-color: #E2BB78;}
#ihp-economic-reasons-drypipeline {background-color: #E2BB78;}
#ihp-nrps-engineering-challenges {background-color: #E2BB78;}
#ihp-social-and-ecological-consequences {background-color: #E2BB78;}
#ihp-translation-void {background-color: #E2BB78;}

main h2[id] {
  scroll-margin-top: var(--header-height);
}

/*
.hp-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 1rem;
}
.hp-tab {
  border: 1px solid ;
  padding: 0.5rem 0.9rem;
  border-radius: 0.5rem;
  background: #fff;
  cursor: pointer;
}
.hp-tab.is-active {
  font-weight: 600;
  box-shadow: 0 0 0 2px inset var(--accent, #222);
}

.hp-tab.overview-nav{
    background: #844876;
}

.hp-panel[hidden],
.hp-sidenav[hidden],
.page-scrim[hidden] { display: none; }



body.sidenav-open .side-navigation:not([hidden]){
        transform: translateX(0);

}
.sidenav-open .side-toggle{
    visibility: hidden;
}

.no-scroll { overflow: hidden; }
*/



.hp-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 2rem 0 2em;
}

.hp-tab {
    border: 2px solid transparent;
    padding: 0.25rem 0.4rem;
    border-radius: 0.5rem;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 500;
}

.hp-tab[data-tab="overview"] {
    border-color: #844876;
    color: #844876;
}

.hp-tab[data-tab="overview"].is-active {
    background: #844876;
    color: white;
    font-weight: 600;
}

.hp-tab[data-tab="ihp"] {
    border-color: #4E7E75;
    color: #4E7E75;
}

.hp-tab[data-tab="ihp"].is-active {
    background: #4E7E75;
    color: white;
    font-weight: 600;
}

.hp-tab[data-tab="safety"] {
    border-color: #B63E54;
    color: #B63E54;
}

.hp-tab[data-tab="safety"].is-active {
    background: #B63E54;
    color: white;
    font-weight: 600;
}

.hp-tab[data-tab="public_engagement"] {
    border-color: #CC922E;
    color: #CC922E;
}

.hp-tab[data-tab="public_engagement"].is-active {
    background: #CC922E;
    color: white;
    font-weight: 600;
}

/* Für Software-Seite */
.hp-tab[data-tab="structural"] {
    border-color: #4E7E75;
    color: #4E7E75;
}

.hp-tab[data-tab="structural"].is-active {
    background: #4E7E75;
    color: white;
    font-weight: 600;
}

.hp-tab[data-tab="genetical"] {
    border-color: #B63E54;
    color: #B63E54;
}

.hp-tab[data-tab="genetical"].is-active {
    background: #B63E54;
    color: white;
    font-weight: 600;
}

/* Hover-Effekt */
.hp-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.hp-tab.is-active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.hp-panel[hidden],
.hp-sidenav[hidden],
.page-scrim[hidden] { display: none; }

.interviewee-desc {
  width: 72%;
}