/* ==========================================================================
   Theme Variables
   ========================================================================== */
:root, [data-bs-theme="light"] {
  --body-bg: linear-gradient(135deg, #f5f7fa, #c3cfe2);
  --danger-disabled: rgba(220,53,69,0.3);
  --info-disabled: rgba(23,162,184,0.3);
  --navbar-bg: #fff;
  --navbar-shadow: rgba(0, 0, 0, 0.07);
  --primary-active-alpha: rgba(68,151,0.8);
  --primary-color: #449700;
  --primary-disabled: rgba(68,151,0.3);
  --primary-hover-alpha: rgba(68,151,0.5);
  --primary-hover-color: #315911;
  --primary-a-hover-color: #112a59;
  --success-disabled: rgba(40,167,69,0.3);
  --success-light-active: rgba(40,167,69,0.8);
  --success-light-hover: rgba(40,167,69,0.6);
  --toggle-danger-light: #dc3545;
  --toggle-info-light: #17a2b8;
  --toggle-orange-light: #ff9800;
  --toggle-success-light: #28a745;
  --toggle-warning-light: #ffc107;
  --text-color: #212529;

  --bs-body-bg: #f6f9fb;
  --bs-body-color: #222;
  --bs-primary: #449700;
  --bs-primary-rgb: 68,151,0;
  --bs-primary-text-emphasis: #315911;
  --bs-primary-bg-subtle: #e3f4d5;
  --bs-primary-border-subtle: #c5e5a6;
  --bs-secondary: #6c757d;
  --bs-secondary-rgb: 108,117,125;
  --bs-secondary-bg-subtle: #f0f2f4;
  --bs-success: #28a745;
  --bs-success-rgb: 40,167,69;
  --bs-success-bg-subtle: #e2f5e8;
  --bs-success-border-subtle: #b6e3c5;
  --bs-info: #17a2b8;
  --bs-info-rgb: 23,162,184;
  --bs-info-bg-subtle: #e0f5f9;
  --bs-info-border-subtle: #afe0ea;
  --bs-warning: #ffc107;
  --bs-warning-rgb: 255,193,7;
  --bs-warning-bg-subtle: #fff7e0;
  --bs-warning-border-subtle: #ffe09b;
  --bs-danger: #dc3545;
  --bs-danger-rgb: 220,53,69;
  --bs-danger-bg-subtle: #fae2e5;
  --bs-danger-border-subtle: #f7c2c9;
  --bs-light: #f8f9fa;
  --bs-light-rgb: 248,249,250;
  --bs-dark: #212529;
  --bs-dark-rgb: 33,37,41;
  --bs-link-color: #449700;
  --bs-link-hover-color: #315911;
  --bs-link-decoration: underline;
  --bs-navbar-bg: #fff;
  --bs-navbar-shadow: 0 2px 12px rgba(68,151,0,0.04);
  --bs-border-radius: 0.5rem;
  --bs-box-shadow: 0 2px 8px rgba(44,62,80,0.06);
  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Dark Theme */
body[data-bs-theme="dark"] {
  --body-bg: linear-gradient(135deg, #30383f, #515d6c);
  --danger-disabled: rgba(231,76,60,0.3);
  --info-disabled: rgba(52,152,219,0.3);
  --navbar-bg: #23292f;
  --navbar-shadow: rgba(0, 0, 0, 0.21);
  --primary-active-alpha: rgba(255,127,80,0.8);
  --primary-color: #ff7f50;
  --primary-disabled: rgba(255,127,80,0.3);
  --primary-hover-alpha: rgba(255,127,80,0.5);
  --primary-hover-color: #be5b37;
  --primary-a-hover-color: #d6b049;
  --success-disabled: rgba(26,188,156,0.3);
  --success-light-active: rgba(26,188,156,0.8);
  --success-light-hover: rgba(26,188,156,0.6);
  --toggle-danger-light: #e74c3c;
  --toggle-info-light: #3498db;
  --toggle-orange-light: #ffa726;
  --toggle-success-light: #1abc9c;
  --toggle-warning-light: #f39c12;
  --text-color: #e9eef3;

  --bs-body-bg: #23292f;
  --bs-body-color: #e9eef3;
  --bs-primary: #ff7f50;
  --bs-primary-rgb: 255,127,80;
  --bs-primary-text-emphasis: #ffb092;
  --bs-primary-bg-subtle: #4a2e2b;
  --bs-primary-border-subtle: #6e473a;
  --bs-secondary: #6c757d;
  --bs-secondary-rgb: 108,117,125;
  --bs-secondary-bg-subtle: #353b42;
  --bs-secondary-border-subtle: #434950;
  --bs-success: #1abc9c;
  --bs-success-rgb: 26,188,156;
  --bs-success-bg-subtle: #244b45;
  --bs-success-border-subtle: #2c6d5e;
  --bs-info: #3498db;
  --bs-info-rgb: 52,152,219;
  --bs-info-bg-subtle: #29414c;
  --bs-info-border-subtle: #386280;
  --bs-warning: #f39c12;
  --bs-warning-rgb: 243,156,18;
  --bs-warning-bg-subtle: #423818;
  --bs-warning-border-subtle: #705b24;
  --bs-danger: #e74c3c;
  --bs-danger-rgb: 231,76,60;
  --bs-danger-bg-subtle: #562825;
  --bs-danger-border-subtle: #983f36;
  --bs-light: #272f36;
  --bs-light-rgb: 39,47,54;
  --bs-dark: #14191c;
  --bs-dark-rgb: 20,25,28;
  --bs-link-color: #ff7f50;
  --bs-link-hover-color: #be5b37;
  --bs-link-decoration: underline;
  --bs-navbar-bg: #23292f;
  --bs-navbar-shadow: 0 2px 16px rgba(255,127,80,0.10);
  --bs-border-radius: 0.5rem;
  --bs-box-shadow: 0 2px 10px rgba(44,62,80,0.16);
  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

  /* ==========================================================================
     Global Styles
     ========================================================================== */
  html, body {
    min-height: 100vh;
    margin: 0;
  }
  body {
    font-family: 'Poppins', sans-serif;
    background: var(--body-bg);
    background-size: cover;
    background-attachment: fixed;
    color: var(--text-color);
    transition: background 0.3s, color 0.3s;
  }

  .bg-mode-light {
    background-color: var(--navbar-bg);
  }
  
  /* ==========================================================================
     Button Overrides
     ========================================================================== */
  .btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.5rem;
    background-color: var(--bs-btn-bg);
    border: 1px solid var(--bs-btn-border-color);
    border: none;
    color: var(--bs-btn-color, #fff);
    /* font-size: 1rem; */
    transition: background-color .3s, border-color .3s, color .3s;
  }
  .btn:hover:not(:disabled) {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color, #fff);
  }
  .btn:active:not(:disabled) {
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
    box-shadow: var(--bs-btn-active-shadow);
    color: var(--bs-btn-active-color, #fff);
  }
  .btn:disabled {
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-bg);
    color: var(--bs-btn-disabled-color, currentColor);
  }
  
  .btn-transparent {
    --bs-btn-hover-color: var(--primary-color);
  }

  .text-bg-primary {
    color: #fff !important;
    background-color: rgba(var(--bs-primary-rgb),var(--bs-bg-opacity,1)) !important;
  }

  /* Primary */
  .btn-primary {
    --bs-btn-active-bg: var(--primary-active-alpha);
    --bs-btn-active-border-color: var(--primary-active-alpha);
    --bs-btn-active-color: #fff;
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-color: #fff;
    --bs-btn-disabled-bg: var(--primary-disabled);
    --bs-btn-hover-bg: var(--primary-hover-color);
    --bs-btn-hover-border-color: var(--primary-hover-color);
    --bs-btn-hover-color: #fff;
  }
    
  /* Secondary */
  .btn-secondary {
    --bs-btn-active-bg: #545b62;
    --bs-btn-active-color: #fff;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-color: #fff;
    --bs-btn-disabled-bg: rgba(108,117,125,0.3);
    --bs-btn-hover-bg: #5a6268;
    --bs-btn-hover-border-color: #5a6268;
    --bs-btn-hover-color: #fff;
  }
  
  /* Success */
  .btn-success {
    --bs-btn-active-bg: var(--success-light-active);
    --bs-btn-active-border-color: var(--success-light-active);
    --bs-btn-active-color: #fff;
    --bs-btn-bg: var(--toggle-success-light);
    --bs-btn-border-color: var(--toggle-success-light);
    --bs-btn-color: #fff;
    --bs-btn-disabled-bg: var(--success-disabled);
    --bs-btn-hover-bg: var(--success-light-hover);
    --bs-btn-hover-border-color: var(--success-light-hover);
    --bs-btn-hover-color: #fff;
  }
  
  /* Success Light */
  .btn-success-light {
    --bs-btn-active-bg: #b1dfbb;
    --bs-btn-bg: #d4edda;
    --bs-btn-border-color: #d4edda;
    --bs-btn-color: #000;
    --bs-btn-disabled-bg: rgba(212,237,218,0.3);
    --bs-btn-hover-bg: #c3e6cb;
    --bs-btn-hover-border-color: #c3e6cb;
  }
  
  /* Danger */
  .btn-danger {
    --bs-btn-active-bg: rgba(220,53,69,0.8);
    --bs-btn-bg: var(--toggle-danger-light);
    --bs-btn-border-color: var(--toggle-danger-light);
    --bs-btn-color: #fff;
    --bs-btn-disabled-bg: var(--danger-disabled);
    --bs-btn-hover-bg: rgba(220,53,69,0.6);
    --bs-btn-hover-border-color: rgba(220,53,69,0.6);
  }
  
  /* Warning */
  .btn-warning {
    --bs-btn-active-bg: rgba(255,193,7,0.8);
    --bs-btn-bg: var(--toggle-warning-light);
    --bs-btn-border-color: var(--toggle-warning-light);
    --bs-btn-color: #000;
    --bs-btn-disabled-bg: var(--warning-disabled);
    --bs-btn-hover-bg: rgba(255,193,7,0.6);
    --bs-btn-hover-border-color: rgba(255,193,7,0.6);
  }
  
  /* Info */
  .btn-info {
    --bs-btn-active-bg: rgba(23,162,184,0.8);
    --bs-btn-bg: var(--toggle-info-light);
    --bs-btn-border-color: var(--toggle-info-light);
    --bs-btn-color: #fff;
    --bs-btn-disabled-bg: var(--info-disabled);
    --bs-btn-hover-bg: rgba(23,162,184,0.6);
    --bs-btn-hover-border-color: rgba(23,162,184,0.6);
  }
  
  /* Light */
  .btn-light {
    --bs-btn-active-bg: #dae0e5;
    --bs-btn-bg: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-color: #000;
    --bs-btn-disabled-bg: rgba(248,249,250,0.3);
    --bs-btn-hover-bg: #e2e6ea;
    --bs-btn-hover-border-color: #e2e6ea;
  }
  
  /* Dark */
  .btn-dark {
    --bs-btn-active-bg: #1d2124;
    --bs-btn-bg: #343a40;
    --bs-btn-border-color: #343a40;
    --bs-btn-color: #fff;
    --bs-btn-disabled-bg: rgba(52,58,64,0.3);
    --bs-btn-hover-bg: #23272b;
    --bs-btn-hover-border-color: #23272b;
  }
  
	.pagination {
	  --bs-pagination-active-color: #fff;
	  --bs-pagination-active-bg: var(--bs-primary);
	  --bs-pagination-active-border-color: var(--bs-primary);
	}

  
/* override all .border-* */
.border-primary       { border-color: var(--primary-color)            !important; }
.border-secondary     { border-color: #6c757d                          !important; }
.border-success       { border-color: var(--toggle-success-light)     !important; }
.border-success-light { border-color: #d4edda                          !important; }
.border-danger        { border-color: var(--toggle-danger-light)      !important; }
.border-warning       { border-color: var(--toggle-warning-light)     !important; }
.border-info          { border-color: var(--toggle-info-light)        !important; }
.border-light         { border-color: #f8f9fa                          !important; }
.border-dark          { border-color: #343a40                          !important; }

/* override all .btn-outline-* */
.btn-outline-primary {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
.btn-outline-primary:hover {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

.btn-outline-secondary {
  color: #6c757d !important;
  border-color: #6c757d !important;
}
.btn-outline-secondary:hover {
  background-color: #6c757d !important;
  color: #fff !important;
}

.btn-outline-success {
  color: var(--toggle-success-light) !important;
  border-color: var(--toggle-success-light) !important;
}
.btn-outline-success:hover {
  background-color: var(--toggle-success-light) !important;
  color: #fff !important;
}

.btn-outline-success-light {
  color: #d4edda !important;
  border-color: #d4edda !important;
}
.btn-outline-success-light:hover {
  background-color: #d4edda !important;
  color: #000 !important;
}

.btn-outline-danger {
  color: var(--toggle-danger-light) !important;
  border-color: var(--toggle-danger-light) !important;
}
.btn-outline-danger:hover {
  background-color: var(--toggle-danger-light) !important;
  color: #fff !important;
}

.btn-outline-warning {
  color: var(--toggle-warning-light) !important;
  border-color: var(--toggle-warning-light) !important;
}
.btn-outline-warning:hover {
  background-color: var(--toggle-warning-light) !important;
  color: #000 !important;
}

.btn-outline-info {
  color: var(--toggle-info-light) !important;
  border-color: var(--toggle-info-light) !important;
}
.btn-outline-info:hover {
  background-color: var(--toggle-info-light) !important;
  color: #fff !important;
}

.btn-outline-light {
  color: #f8f9fa !important;
  border-color: #f8f9fa !important;
}
.btn-outline-light:hover {
  background-color: #f8f9fa !important;
  color: #000 !important;
}

.btn-outline-dark {
  color: #343a40 !important;
  border-color: #343a40 !important;
}
.btn-outline-dark:hover {
  background-color: #343a40 !important;
  color: #fff !important;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}


  /* ==========================================================================
     Standard Links
     ========================================================================== */
  a {
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.05s ease-in-out;
  }
  a:hover,
  a:focus {
    color: var(--primary-a-hover-color);
    text-decoration: none;
  }
  a:active {
    background-color: var(--primary-active-alpha);
    box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    color: #fff;
  }
  
  /* ==========================================================================
     Toggle Button Utilities
     ========================================================================== */
  .toggle-bg {
    background-color: var(--primary-color);
    border: none;
    border-color: var(--primary-color) !important;
    border-radius: 4px;
    color: #fff !important;
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    transition: background-color 0.3s;
  }
  .toggle-text {
    color: var(--primary-color) !important;
  }
  .toggle-text-dark {
    color: #111 !important;
  }
  
  /* ==========================================================================
     Toggle Button Styles – Hauptfokus
     ========================================================================== */
  /* Outline Toggle Button */
  .toggle-outline-btn {
    background: transparent;
    border: 1px solid var(--primary-color);
    border-color: var(--primary-color) !important;
    border-radius: 4px;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    transition: background-color 0.1s, color 0.1s;
  }
  .toggle-outline-btn:hover {
    background-color: var(--primary-hover-color);
    color: #fff;
  }
  /* Variant Styles – Light Theme */
  .toggle-outline-btn.danger {
    border-color: var(--toggle-danger-light) !important;
    color: var(--toggle-danger-light);
  }
  .toggle-outline-btn.info {
    border-color: var(--toggle-info-light) !important;
    color: var(--toggle-info-light);
  }
  .toggle-outline-btn.orange {
    border-color: var(--toggle-orange-light) !important;
    color: var(--toggle-orange-light);
  }
  .toggle-outline-btn.success {
    border-color: var(--toggle-success-light) !important;
    color: var(--toggle-success-light);
  }
  .toggle-outline-btn.warning {
    border-color: var(--toggle-warning-light) !important;
    color: var(--toggle-warning-light);
  }
  .toggle-outline-btn.danger:hover {
    background-color: var(--toggle-danger-light);
    color: #fff;
  }
  .toggle-outline-btn.info:hover {
    background-color: var(--toggle-info-light);
    color: #fff;
  }
  .toggle-outline-btn.orange:hover {
    background-color: var(--toggle-orange-light);
    color: #fff;
  }
  .toggle-outline-btn.success:hover {
    background-color: var(--toggle-success-light);
    color: #fff;
  }
  .toggle-outline-btn.warning:hover {
    background-color: var(--toggle-warning-light);
    color: #212529;
  }
  
  /* ==========================================================================
     BG Mode Utility
     ========================================================================== */
  .bg-mode {
    background: var(--navbar-bg);
    transition: background 0.3s, box-shadow 0.3s, transform 0.3s ease;
  }
  
  /* ==========================================================================
     Sidebar Navigation Styles
     ========================================================================== */
  .manager-sidebar {
    width: 250px;
    background: var(--navbar-bg);
    box-shadow: 2px 0 4px var(--navbar-shadow);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform 0.3s ease, background 0.3s, box-shadow 0.3s;
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
  }

  .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
  }

  #sidebarToggle {
    top: 0px;
    left: 250px;
    z-index: 99999;
    transition: left 0.3s ease;
    font-size: 8pt;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.285rem;
  }
  #sidebarToggle::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    float: right;
    content: "\f00d";
  }
  #sidebarToggle.active {
    left: 0px;
  }
  #sidebarToggle.active::after {
    content: "\f0c9";
  }
  @media (max-width: 992px) {
    .manager-sidebar {
      transform: translateX(-100%);
      z-index: 1050;
    }
    .manager-sidebar.active {
      transform: translateX(0);
    }
  }
  
  /* ==========================================================================
     Main Content Area
     ========================================================================== */
  .main-content {
    margin-left: 250px;
    padding: 1rem;
    transition: margin-left 0.3s;
  }
  @media (max-width: 992px) {
    .main-content {
      margin-left: 0;
    }
  }
  
  /* ==========================================================================
     Sidebar Header (Mobile Only)
     ========================================================================== */
  .sidebar-header {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 1rem;
  }
  
  /* ==========================================================================
     Accordion Navigation Styles
     ========================================================================== */
  .accordion {
    border: none;
  }
  .accordion-item {
    border: none;
    background: transparent;
  }
  .accordion-header {
    padding: 0;
  }
  .accordion-button {
    background: transparent;
    color: var(--primary-color);
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    border: none;
    box-shadow: none !important;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
  }
  .accordion-button:hover {
    background-color: var(--primary-hover-alpha);
    color: #fff !important;
  }
  .accordion-button.collapsed {
    background: none;
    color: var(--primary-color);
  }
/* 
  .accordion-button:not(.navigation).collapsed:not(:disabled) {
    background: var(--primary-color);
    color:#fff;
  } */

  .accordion-item:not(:first-child) {
    margin-top: 5px;
  }
  .accordion-button:not(.collapsed),
  .accordion-button:disabled
  {
    background-color: unset;
  }

  .accordion-button:not(.navigation):not(.collapsed),
  .accordion-button:hover {
    background-color: var(--primary-hover-alpha) !important;
    color: #fff !important;
  }
  .accordion-button::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    float: right;
    transition: transform 0.3s ease;
    color: #fff;
    text-shadow: none;
    filter: none;
    background-image: unset !important;
    width: unset;
    height: unset;
  }

  .accordion-button.navigation::after {
    color: var(--bs-accordion-active-color);
  }

  .accordion-button:disabled::after {
    content: "";
  }

  .accordion-button.collapsed::after {
    color: var(--primary-color);
    transform: rotate(0deg);
  }
  .accordion-button.active::after,
  .accordion-button:hover::after {
    color: #fff !important;
  }
  .accordion-button.no-chevron::after {
    display: none;
  }
  .accordion-collapse {
    background: transparent;
  }
  .accordion-body {
    padding: 0;
  }
  .accordion-body ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  
  .nav-link {
    padding: 0.5rem 1.25rem;
    color: var(--primary-color);
    text-decoration: none;
    background: transparent;
    transition: background 0.3s, color 0.3s;
  }
  .nav-link:hover {
    background-color: var(--primary-hover-alpha) !important;
    color: #fff !important;
  }
  .accordion-button.active,
  .accordion-body .nav-link.active {
    background-color: var(--primary-active-alpha);
    color: #fff !important;
  }
  .accordion-body .nav-link.active::after {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    float: right;
    transition: transform 0.3s ease;
    color: #fff;
    text-shadow: none;
    filter: none;
    background-image: unset !important;
    width: unset;
    height: unset;
  }
  .accordion-body .nav-link.active:hover::after {
    animation: tilt-shaking 1s infinite;
  }
  @keyframes tilt-shaking {
    0% { transform: translateX(-3px); }
    25% { transform: translateX(3px); }
    50% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
    100% { transform: translateX(-3px); }
  }
  
  /* ==========================================================================
     Simple Navigation (ohne Akkordeon)
     ========================================================================== */
  .simple-nav-item .accordion-button.no-chevron {
    background: transparent;
    color: var(--primary-color) !important;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
  }
  .simple-nav-item .accordion-button.no-chevron:hover {
    background-color: var(--primary-hover-alpha) !important;
    color: #fff !important;
  }
  
  /* ==========================================================================
     Benutzeranzeige & Dropdown
     ========================================================================== */
  .sidebar-user a {
    background: transparent;
    color: var(--primary-color);
    padding: 0.75rem 1.25rem;
  }
  .sidebar-user a:hover {
    background-color: var(--primary-hover-alpha);
    color: #fff;
  }
  .sidebar-user .dropdown-menu {
    background-color: var(--navbar-bg);
    border: none;
    box-shadow: 0 0 0.5rem rgba(0,0,0,0.15);
  }
  .sidebar-user .dropdown-item {
    color: var(--primary-color);
  }
  .sidebar-user .dropdown-item:hover {
    background-color: var(--primary-hover-alpha);
    color: #fff;
  }
  
  .cursor-pointer {
    cursor: pointer;
  }
  
  @media (min-width: 1400px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
      max-width: 1638px;
    }
  }
  
  .accordion-item:last-child .list-group-item:last-child {
    border-bottom-left-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
  }
  
  .module-card {
    background-color: var(--navbar-bg);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px var(--navbar-shadow);
    transition: box-shadow 0.3s, background-color 0.3s;
  }
  .upload_dropZone {
    color: var(--tblr-dark);
    outline: 2px dashed var(--tblr-dark, #002b46);
    outline-offset: -12px;
    transition:
      outline-offset 0.2s ease-out,
      outline-color 0.3s ease-in-out,
      background-color 0.2s ease-out;
  }
  .upload_dropZone.highlight {
    outline-offset: -4px;
    outline-color: var(--tblr-dark, #002338);
  }
  .upload_svg {
    fill: var(--tblr-dark, --tblr-light);
  }
  .upload_img {
    width: calc(33.333% - (2rem / 3));
    object-fit: contain;
  }
  
  /* Einrückung nach Level */
  .module-card[data-level="1"]:not(.search) { margin-left: 5px; }
  .module-card[data-level="2"]:not(.search) { margin-left: 10px; }
  .module-card[data-level="3"]:not(.search) { margin-left: 15px; }
  .module-card[data-level="4"]:not(.search) { margin-left: 20px; }
  .module-card[data-level="5"]:not(.search) { margin-left: 25px; }
  .module-card[data-level="6"]:not(.search) { margin-left: 30px; }
  .module-card[data-level="7"]:not(.search) { margin-left: 35px; }
  .module-card[data-level="8"]:not(.search) { margin-left: 40px; }
  .module-card[data-level="9"]:not(.search) { margin-left: 45px; }
  .module-card[data-level="10"]:not(.search) { margin-left: 50px; }
  
  /* Für Viewports >= md */
  @media (min-width: 768px) {
    .module-card[data-level="1"]:not(.search) { margin-left: 20px; }
    .module-card[data-level="2"]:not(.search) { margin-left: 40px; }
    .module-card[data-level="3"]:not(.search) { margin-left: 60px; }
    .module-card[data-level="4"]:not(.search) { margin-left: 80px; }
    .module-card[data-level="5"]:not(.search) { margin-left: 100px; }
    .module-card[data-level="6"]:not(.search) { margin-left: 120px; }
    .module-card[data-level="7"]:not(.search) { margin-left: 140px; }
    .module-card[data-level="8"]:not(.search) { margin-left: 160px; }
    .module-card[data-level="9"]:not(.search) { margin-left: 180px; }
    .module-card[data-level="10"]:not(.search) { margin-left: 200px; }
  }
  
  .module-card[data-level="0"],
  .search {
    border-left: 0;
  }
  
  .language-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }
  .language-item {
    display: flex;
    align-items: center;
    margin-right:20px;
  }
  .language-item img {
    max-width: 24px;
    margin-right: 0.25rem;
  }
  

  .form-check-input.small {
    width: 0.8em;
    height:0.8em;
  }

  .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-hover-color);
  }

  .list-group-item.active {
    border-color: var(--primary-color);
    background:transparent;
    color: var(--primary-color);
  }


    /* Pill Toggle */
  .cg-seg{
    --seg-bg: var(--bs-light, #f8f9fa);
    --seg-on: var(--bs-primary, #449700);
    --seg-off: var(--bs-danger, #dc3545);
    --seg-border-radius: 8px; 
    position: relative;
    display: inline-flex;
    gap: 0;
    border-radius: var(--seg-border-radius);
    padding: 2px;
    background: var(--seg-bg);
    border: 1px solid rgba(0,0,0,.06);
    user-select: none;
  }
  .cg-seg .seg-btn{
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    border: 0;
    background: transparent;
    padding: .4rem .9rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--bs-body-color, #1f2d3a);
    border-radius: var(--seg-border-radius);
  }
  .cg-seg .seg-btn:focus-visible{
    outline: 0;
    box-shadow: 0 0 0 .18rem rgba(25,135,84,.25);
  }
  .cg-seg .seg-indicator{
    position: absolute; inset: 2px auto 2px 2px;
    width: calc(50% - 2px);
    border-radius: var(--seg-border-radius);
    background: var(--seg-off);
    transition: transform .18s ease, background-color .18s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.06);
  }
  .cg-seg[data-on="1"] .seg-indicator{ transform: translateX(100%); background: var(--seg-on); }

  /* aktive Beschriftungsfarben */
  .cg-seg[data-on="0"] .seg-btn[data-val="0"]{ color: #fff; }
  .cg-seg[data-on="1"] .seg-btn[data-val="1"]{ color: #fff; }

  /* kompaktere Variante (falls gewünscht) */
  .cg-seg.seg-small .seg-btn{ padding: .3rem .7rem; font-weight: 600; font-size: .9rem; }
  /* Beispielaufruf
    <input type="checkbox" id="cookieRuleSwitch" class="d-none" {[SAVED_DATA.cookieGate.enabled == 1 ? checked : ]}>
    <div class="cg-seg" data-cg-seg role="switch" aria-checked="{[SAVED_DATA.cookieGate.enabled == 1 ? true : false]}">
      <button type="button" class="seg-btn" data-val="0">
        <i class="fa-solid fa-toggle-off me-1"></i> Deaktiviert
      </button>
      <button type="button" class="seg-btn" data-val="1">
        <i class="fa-solid fa-toggle-on me-1"></i> Aktiviert
      </button>
      <span class="seg-indicator" aria-hidden="true"></span>
    </div>
  */