.custom-tabs {
   .et_pb_row {
      display: flex;

      .et_pb_column_single {
         border-right: 2px solid var(--color-white);
         margin-right: 0px;
         width: 50%;
         padding: 0px;

         ul {
            list-style: none;
            padding: 0;

            li {
               padding: 8px 0px;
               margin-bottom: 21px;
               cursor: pointer;
               transition: ease 0.3s;
               color: var(--color-white);
               font-size: var(--copy-xl);
               font-family: var(--font-light);
               text-transform: uppercase;
               padding-right: 64px;

               &:first-child {
                  padding-top: 0px;
               }

               h2,
               h3 {
                  cursor: pointer;
                  transition: ease 0.3s;
                  color: var(--color-white);
                  text-transform: uppercase;
                  padding: 0px;

                  font-family: var(--font-bold);
                  font-size: 30px;
                  line-height: 1em;
               }

               &::before {
                  display: none;
               }

               &.active {
                  padding-left: 40px;
                  position: relative;
                  padding-bottom: 0px;

                  &::before {
                     content: "";
                     display: block;
                     height: 30px;
                     width: 25px;
                     aspect-ratio: cos(30deg);
                     clip-path: polygon(0 0, 100% 50%, 0 100%);
                     background: var(--color-yellow);
                     position: absolute;
                     left: 0px;
                     top: calc(50% - 15px);
                  }
               }
            }
         }
      }

      .et_pb_specialty_column {
         margin-left: 64px;
         margin-top: 30px;

         .content-row {
            display: none;
            padding-top: 0px;
            transition: opacity 0.3s;
            color: var(--color-white);

            &.active {
               display: block;
            }

            /*ol as tags*/
            ol {
               display: flex;
               gap: 17px;
               display: flex;
               flex-wrap: wrap;

               li {
                  list-style: none;
                  padding: 0px 10px;
                  font-size: var(--copy-x);
                  font-family: var(--font-regular);
                  white-space: nowrap;
                  position: relative;

                  &::before {
                     content: "";
                     border: 1px solid var(--color-white);
                     transform: skew(-11deg);
                     position: absolute;
                     list-style: none;
                     width: 100%;
                     height: 100%;
                     left: 0px;
                     padding: 3px 0px;
                     bottom: -4px;
                  }
               }
            }
         }
      }
   }
}

.et_pb_gutters3 .et_pb_column_single.et_pb_column_1_3 .et_pb_module.tab-arrow {
   margin-bottom: 30px;

   .et_pb_code_inner {
      display: none;
   }
}

.arrow {
   display: none;
}

@media(max-width:1220px) {
   .custom-tabs {
      .et_pb_row {
         flex-direction: column;
         gap: 0px;
         width: 100%;
         margin-right: 0px;
         margin-left: 0px;
         max-width: 100%;

         .et_pb_column {
            width: 100%;



            &.et_pb_column_single {
               border-right: 0px solid var(--color-white);
               margin-bottom: 0px;

               .tab-arrow .et_pb_code_inner {
                  display: flex;
                  justify-content: space-between;

                  h3 {
                     color: var(--color-white);
                     width: 80%;
                  }
               }

               .list-wrapper {
                  border-top: 1px solid var(--color-yellow);

                  .borderbottom_y {
                     height: 1px;
                     display: block;
                     background-color: var(--color-yellow);
                     position: absolute;
                     bottom: 40px;
                     width: 100%;

                  }

                  ul {
                     position: relative;
                     padding-bottom: 40px;

                     li {
                        font-size: var(--copy-xs);
                        font-family: var(--font-regular);
                        padding: 10px !important;
                        margin-bottom: 0px;

                        h3 {
                           font-size: var(--copy-xs);
                           font-family: var(--font-regular);
                           padding: 10px !important;
                           margin-bottom: 0px;
                        }

                        &.active {
                           background-color: var(--color-yellow);
                           color: var(--color-blue) !important;
                           border-radius: 0px;

                           h3 {
                              color: var(--color-blue) !important;
                           }

                           &::before {
                              display: none !important;
                           }

                           &::after {
                              content: '';
                              display: inline;
                              position: absolute;
                              border-top: 30px solid var(--color-yellow);
                              border-left: 18px solid transparent;
                              border-right: 18px solid transparent;
                              width: 0px;
                              z-index: 22222;
                              bottom: -30px;
                              left: calc(50% - 15px);
                           }
                        }
                     }
                  }
               }
            }

            &.et_pb_specialty_column {
               width: 86% !important;
               margin-right: auto !important;
               margin-left: auto !important;
               margin-top: 0px;

               & .content-row {
                  ol {
                     display: flex;
                     gap: 17px;
                     flex-wrap: wrap;
                  }
               }
            }
         }
      }
   }

   .content-row.active {
      display: block;
   }

   /* Basis */
   .custom-tabs {
      display: flex;
      align-items: center;
      gap: 8px;
   }

   .list-wrapper {
      overflow-x: auto;
      white-space: nowrap;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      flex: 1;
   }

   .tab-list {
      display: flex;
      gap: 10px;
      padding: 0;
      margin: 0;
      list-style: none;
      overflow-x: auto;
      scroll-behavior: smooth;
   }

   .tab-list li {
      display: inline-block;
      padding: 8px 14px;
      border-radius: 6px;
      cursor: pointer;
      white-space: nowrap;
      user-select: none;
   }

   .tab-list li.active {
      color: #fff;
   }

   /* Arrow-Style */
   .arrow {
      color: #fff;
      border: none;
      cursor: pointer;
      display: block;
      background-color: transparent;
   }

   .tablet-hide-title {
      display: none;
   }

   .arrow img {
      width: 20px;
   }

   .arrow:active {
      transform: scale(0.98);
   }

   /* Content */
   .content-row {
      display: none;
      padding: 12px;
      margin-top: 12px;
   }

   .content-row.active {
      display: block;
   }
}

/* Mobile: falls du spezielle mobile-regeln willst, kannst du sie anpassen */
@media (max-width:768px) {
   .custom-tabs {
      gap: 6px;
   }

   .tab-list li {
      padding: 10px 16px;

      &::before {
         display: none;
      }
   }
}