.tsDashboard {
  display:flex;
  min-height:100vh;
}

.ts-profile-name {
  color: grey;
  font-size: 15px;
}

#personal_data {
  scroll-margin-top: 130px;
}
#password {
  scroll-margin-top: 100px;
}
#interests {
  scroll-margin-top: 100px;
}
/* SIDEBAR */

  /* Farben */
  #sidebar-menu-item-logout i {
    color:#E53935
  }
  #sidebar-menu-item-home i {
     color:#1E88E5;
  }
  #sidebar-menu-item-members i {
    color:#43A047;
  }
  #sidebar-menu-item-trainings i {
    color: #aa5bbf; /* KI: #8E24AA;*/
  }
  #sidebar-menu-item-materials i {
    color: #FDD835;
  }
  #sidebar-menu-item-further-trainings i {
    color: #FB8C00;
  }
  #sidebar-menu-item-coupons i {
    color:#00ACC1;
  }
  #sidebar-menu-item-personal-data i {
    color: #856a61; /* KI: #6D4C41;*/
  }
  #sidebar-menu-item-status i {
    color: #FFD700;
  }

    /* unser blau: #4599d4 KI: #1e293b */
  .tsSidebar{
   width:260px;
   min-width:260px;
   background:#1e293b;
   color:white;
   padding:25px 20px;
   margin-right: 30px;
   position: sticky;
   top: 130px;
   height: 100vh;
   overflow-y: auto;
 }

   .tsSidebar__logo {
     font-size:20px;
     font-weight:600;
     margin-bottom:25px;
   }

   .tsSidebarMenu {
     list-style:none;
     padding:0;
   }

   .tsSidebarMenu > li.active > a,
   .tsSidebarMenu > li.active span{
     background:#445163;
     color: white;
   }
   .tsSidebarMenu i {
     margin-right:8px;
   }

   .tsSidebarMenu a,
   .submenu-toggle {
     display:block;
     padding:8px 12px;
     color: #cbd5e1;
     text-decoration:none;
     border-radius:6px;
     margin: 1px 0
   }

   .tsSidebarMenu a {
     cursor: pointer;
   }
   .submenu-toggle {
     cursor: s-resize;
   }

   .tsSidebarMenu a:hover {
     background:#334155;
     color:white;
   }

   /* SUBMENU */

   .submenu {
     display:none;
     list-style:none;
     padding-left:15px;
     /*margin-top:5px;*/
   }

   .submenu.opened {
     display:block;
   }

   .submenu a {
     font-size:14px;
     padding: 5px 10px;
   }

   .submenu li {
    /*margin-bottom:8px;*/
   }

   /* CONTENT */

   .tsContent {
     flex:1;
     padding:30px;
    /*background:#f8fafc;*/
   }

   .tsBurger {
     display: none;
   }

   /* MOBILE */

   @media (max-width:900px){

     .tsBurger {
       display: block;
     }
     .tsSidebar{
       position:fixed;
       left:-260px;
       top:0;
       height:100%;
       transition:.3s;
       z-index:999;
     }

     .tsSidebar.open{
       left:0;
     }
   }



   /* KI 1. Grundlayout verbessern */
   .tsAccount {
     max-width: 1200px;
     margin: 0 auto;
   }

   .tsTrainingFlex {
     display: flex;
     gap: 30px;
     align-items: flex-start;
   }

   .tsTrainingFlex > div:first-child {
     flex: 2;
   }

   .tsTrainingFlex > div:last-child {
     flex: 1;
   }


   /* KI 2. Typografie & Überschriften */

   h3 {
     font-size: 22px;
     margin-bottom: 10px;
     border-bottom: 2px solid #e5e5e5;
     padding-bottom: 5px;
   }

   h4 {
     font-size: 16px;
     margin-top: 20px;
     color: #666;
   }


   /* KI 3. Tabelle moderner gestalten */

   .tsTrainingTable {
     width: 100%;
     border-collapse: collapse;
     margin-top: 10px;
     background: #fff;
     border-radius: 6px;
     overflow: hidden;
     box-shadow: 0 2px 6px rgba(0,0,0,0.5);
   }

   .tsTrainingTable th {
     background: #e5e5e5;
     text-align: left;
     padding: 10px;
     font-weight: 600;
     font-size: 13px;
     color: #555;
   }

   .ts-purple {
     margin-top: 20px !important;
   }

   .tsTrainingTable td {
     padding: 10px;
     border-top: 1px solid #eee;
     font-size: 14px;
   }

   .tsTrainingTable tr:hover {
     background: #fafafa;
   }


   /* KI 4. Links & Buttons vereinheitlichen */

   .tsLink {
     color: #2a7db8;
     text-decoration: none;
     font-weight: 500;
   }

   .tsLink:hover {
     text-decoration: underline;
   }

   .tsLink i {
     margin-right: 5px;
   }


   /* KI 5. Member-Box als Card */

   .tsMemberBox {
     background: #fff;
     border-radius: 8px;
     padding: 20px;
     box-shadow: 0 2px 8px rgba(0,0,0,0.06);
   }

   .tsMemberBox ul {
     list-style: none;
     padding: 0;
     margin: 0;
   }

   .tsMemberBox li {
     margin-bottom: 8px;
     font-size: 14px;
   }

   .tsMemberBox h3 {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }



   /* KI 6. Gesamt-Layout (wichtiger Schritt) */

   .tsAccount__title {
     margin: 30px 0 10px;
   }

   .tsAccount__title h3 {
     font-size: 22px;
     border-bottom: 2px solid #eee;
     padding-bottom: 6px;
   }

   .ts-flex-container {
     display: flex;
     gap: 25px;
   }

   .ts-flex-element {
     flex: 1;
   }


   /* KI 7. Form als moderne Card */

   .ts-flex-element {
     border-radius: 10px;
     box-shadow: 0 3px 12px rgba(0,0,0,0.3);
   }

  #profile-page .ts-flex-element {
    background-color: white !important;
  }



   /* KI 8. Form-Gruppen sauber ausrichten */

   .tsGroup {
     margin-bottom: 18px;
     display: flex;
     flex-direction: column;
   }

   .tsGroup label {
     font-size: 13px;
     color: #666;
     margin-top: 7px;
     margin-bottom: 3px;
   }

   .tsGroup input,
   .tsGroup select {
     height: 40px;
     padding: 0 12px;
     border: 1px solid #ddd;
     border-radius: 6px;
     font-size: 14px;
     transition: 0.2s;
   }

   .tsGroup input:focus {
     border-color: #2a7db8;
     outline: none;
     box-shadow: 0 0 0 2px rgba(42,125,184,0.1);
   }



   /* KI 9. Disabled Felder besser darstellen */

   .tsGroup input:disabled {
     background: #f7f7f7;
     color: #999;
     cursor: not-allowed;
   }

   .tsGroup div[style*="italic"] {
     font-size: 12px;
     color: #999;
     margin-top: 4px;
   }



   /* KI 10. Buttons vereinheitlichen */

   .ts-purple {
     background: #2a7db8;
     color: #fff !important;
     border: none;
     padding: 10px 18px;
     border-radius: 6px;
     cursor: pointer;
     font-size: 14px;
     transition: 0.2s;
   }

   .page-content input {
     margin: 5px 0;
   }

   .ts-purple:hover {
     background: #1f5f8a;
   }


   /* KI 11. Highlight-Boxen (Rechnungs-/Lieferadresse) */
   .tsGroup--highlighted {
     margin-top: 25px;
     border-radius: 8px;
   }

   .tsGroup--highlighted h4 {
     margin-bottom: 15px;
     font-size: 16px;
   }


   /* KI 12. Passwortbereich optisch trennen */

   #password + .tsAccount .ts-flex-element form {
     border-left: 4px solid #2a7db8;
   }

   /* KI 13. Chosen / Multi-Select modernisieren */

   .chosen-container-multi .chosen-choices {
     border-radius: 6px;
     border: 1px solid #ddd;
     padding: 5px;
     min-height: 40px;
   }

   .chosen-container-active .chosen-choices {
     border-color: #2a7db8;
   }

   .chosen-container-multi .chosen-choices li.search-choice {
     background: #e6f0f8;
     border: none;
     border-radius: 4px;
   }


   /* KI 14. Interessen-Bereich sauberer layouten */

   .cn-sector-wrapper {
     display: flex;
     gap: 20px;
     flex-wrap: wrap;
   }

   .cn-sector-div {
     flex: 1 1 45%;
   }

   .cn-sector-header {
     font-size: 13px;
     color: #555;
     margin-bottom: 10px;
   }


   /* KI 15. Plus/Minus Buttons UX verbessern */

  .chosen-container {
    margin-top: 2px !important;
    //height: 37px !important;
  }
  .chosen-search-input {
    height: 37px !important;
  }
  h4 {
    margin-top: 20px;
  }
  .cn-sector-wrapper {
    display: flex;
    flex-flow: wrap;
  }
  .cn-sector-div {
    margin-right: 10px;
    flex-basis: 45%;
  }

  .cn-sector-input {
    width: 70% !important;
    margin-top: -2px !important;
    border: 1px #aaa solid !important;
    border-radius: 6px !important;
  }

  .cn-sector-header {
    font-weight: bold;
    font-style:italic;
    font-size: 13px;
    margin-bottom: 6px;
  }
  #cn-sector-form-submit {
    margin-top: 6px;
    color: black !important;
    background-color: #eeeebb;
  }
  #cn-sector-form-submit:hover {
    color: black !important;
    background-color: #ddddaa;
  }
   .cn-sector-button-plus,
   .cn-sector-button-minus {
     border: none;
     padding: 6px 10px;
     border-radius: 4px;
     cursor: pointer;
   }

   .cn-sector-button-plus,
   .cn-sector-button-plus:hover {
     background: #71d571;
     color: black;
   }

   .cn-sector-button-minus,
   .cn-sector-button-minus:hover {
     background: #ea7d7d;
     color: black;
   }


   /* KI 16. Optional (starker Impact) */

   .tsGroup--inline {
     display: flex;
     gap: 10px;
   }

   .tsGroup--inline input {
     flex: 1;
   }