.TabsContainer {
   display: flex;
   margin: 0px 0;

   .TabsElement {

      cursor: pointer;
      color: #333;
      user-select: none;
      transition: background 0.4s ease, color 0.2s ease, border-color 0.9s ease, transform 0.1s ease;
   }

   .TabsElement:hover {

   }

   .TabsElement.active {

   }
}







div.TabsContainer.TabTyp1 {
   gap: 10px; /* Abstand zwischen den Buttons */

   div.TabsElement.active {
      background: #215db6;
      color: #fff;
      border-color: #0d6efd;
   }
   div.TabsElement:hover {
      background: #0d6efd;
      color: #fff;
      border-color: #0d6efd;
      transform: translateY(-1px);
   }
   div.TabsElement {
      padding: 8px 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background: #f5f5f5;
   }

}



div.TabsContainer.TabTopbar {
   gap: 10px; /* Abstand zwischen den Buttons */
   padding-left: 0em;

   div.TabsElement.active {
      background: #2c60acfa;
      color: #fff;
      border-color: #1c3f71;
   }
   div.TabsElement:hover {
      background: #0d6efd; /* Blau (�hnlich Bootstrap) */
      color: #fff;
      border-color: #0d6efd;
      transform: translateY(-1px);
   }
   div.TabsElement {
      padding: 2px 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background: #f5f5f5;
   }

}








div.TabsContainer.Karten {
   gap:0;

   div.TabsElement.active {
      background: #ffffff;
      border-top: 1px solid #d7d7d7;
      border-left: 1px solid #d7d7d7;
      border-right: 1px solid #d7d7d7;
      border-bottom: 0px;
      color:black;
      font-weight: bold;
      font-size: 110%;
   }
   div.TabsElement:not(.active):hover {
      background: #acb6ca30;
      color:black;
   }
   div.TabsElement span {

   }
   div.TabsElement span:hover {
   }
   div.TabsElement {
      display: inline-block;
      padding: 7px 13px 7px 13px;
      margin:0;
      margin-right: 1px;
      border-right: 1px solid #e0e0e0;
      border-top: 1px solid #e0e0e0;
      border-left: 0px solid #ffffff;
      border-bottom: 1px solid #d7d7d7;
      background: #f2f2f2;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      font-size: 93%;
   }

}




div.TabsContainer.Vertical {
   gap: 10px; /* Abstand zwischen den Buttons */
   display: inline-block;
   padding-top:3em;
   padding-left:7px;

   div.TabsElement.active {
      background: #215db6;
      color: #fff;
      border-color: #0d6efd;
   }
   div.TabsElement:hover {
      background: #0d6efd; /* Blau (�hnlich Bootstrap) */
      color: #fff;
      border-color: #0d6efd;
      transform: translateY(-1px);
   }
   div.TabsElement {
      padding: 6px 3px;
      border-radius: 9px;
      background: #ffffff63;
      width: 42px;
      text-align: center;
      font-size: 130%;
      margin-bottom: 0.7em;
   }
   div.TabsElement span {
      scale: 1.5;
      display: inline-block;
      filter: grayscale(100%);
   }

}