/* ------------------------------------------------------------- 31/05/2025 - *
   ul.tabs25 (tab)
  <ul class="tabs25 | -is-sticky-tabs | .-testr | .-showtaginfo" data-tabgroup="tabgroup-demo">
    <li><a data-target="tab1" class="-is-active"><b>tab1</b></a></li>
    <li><a data-target="tab2"><b>tab2</b></a></li>
    <li class="-align-right"><a data-target="tab3"><b>tab3</b></a></li>
  </ul>
  <div class="tabs25" id="tabgroup-demo">
    <div id="tab1">TAB1</div>  
    <div id="tab2">TAB2</div>
    <div id="tab3">TAB3</div>  
  </div><!-- tabgroup -->
 * -------------------------------------------------------------------------- */
ul.tabs25 {
  display: flex;
  flex-wrap: nowrap; // für Scroll
  gap: .5em 1em;
  list-style: none;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* IOS Softscroll */
//> * { border: 1px dotted; }

  /* Scrollbar ausblenden */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none; /* Firefox */  
  &::-webkit-scrollbar { display: none; } /* Chrome */

  li {
    a {
      text-decoration: none;
      border-bottom: 2px solid rgba(var(--text-rgb, Fuchsia), .1);
      cursor: pointer;

      &:hover { text-decoration: none; }      
      &:hover, 
      &.-is-active { border-bottom: 2px solid var(--warn-hex, Fuchsia); }
      &.-is-active { cursor: default; }
    } /* a */

    &.-align-right { margin-left: auto; } /* Einzelnes li rechts */

    .-spot {
      display: inline-block;
      min-width: 3ch;
      padding: 0 2px;
      &:not([class*="-bradius"]) { border-radius: 4px; }
    } /* -spot */
  } /* li */

  @at-root .secPage {
    .-is-sticky-tabs {
      position: sticky;
      z-index: 11; 
      top: 0; /* default, stickheader definiert selbst */
      padding: 1em 0; 
      background: var(--back-hex, Fuchsia);
    //background: linear-gradient(to bottom, var(--back-hex, Fuchsia) 85%, transparent 100%);
    } /* -is-sticky-tabs */
  } /* @at-root .secPage */
} /* ul.tabs25 */


/* ------------------------------------------------------------- 31/05/2025 - *
   div.tabs25 (tabgroup)
 * -------------------------------------------------------------------------- */
div.tabs25 {
//border-right: 1px solid;
  margin-top: 1em;

  > div {
    display: none;
    opacity: 0;
    transition: opacity .3s;

    &.-is-active {
      display: block;
      opacity: 1;
    } /* .-is-active */
  } /* > div */
} /* div.tabs25 */