/* ======================================================
   ADMIN STYLESHEET - KOMPLETT ÜBERARBEITET
   ====================================================== */

/* ----------------------
   1. CSS RESET & VARIABLEN
   ---------------------- */
   
   :root {
    /* Primäre Farbpalette */
    --color-primary: #337ab7;
    --color-primary-dark: #2e6da4;
    --color-primary-light: #5bc0de;
    --color-secondary: #6c757d;
    --color-success: #5cb85c;
    --color-success-dark: #4cae4c;
    --color-danger: #d9534f;
    --color-danger-dark: #d43f3a;
    --color-warning: #ffc107;
    --color-info: #5bc0de;
    
    /* Button Farben */
    --color-button: #337ab7;
    --color-button-hover: #45a049;
    
    /* Neutrale Farben */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;
    
    
    /* Text */
    --font-family-base: Arial, Helvetica, sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-h1: 24px;
    --font-size-h2: 20px;
    --font-size-h3: 18px;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --line-height-base: 1.5;
    
    /* Abstände */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Komponenten */
    --border-radius: 4px;
    --border-radius-lg: 8px;
    --border-width: 1px;
    --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    
    /* Übergänge */
    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.3s ease-in-out;
    
    /* Z-Index Schichten */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal: 1040;
    --z-index-popover: 1050;
    --z-index-tooltip: 1060;
    
    /* RGB-Varianten für Hauptfarben (für Transparenz) */
    --color-primary-rgb: 51, 122, 183;
    --color-secondary-rgb: 108, 117, 125;
    --color-success-rgb: 92, 184, 92;
    --color-danger-rgb: 217, 83, 79;
    --color-warning-rgb: 255, 193, 7;
    --color-info-rgb: 91, 192, 222;
  }
  
  /* Dark Mode Variablen */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-primary: #4d90cd;
      --color-primary-dark: #3a7ab9;
      --color-background: #121212;
      --color-surface: #1e1e1e;
      --color-text: #e0e0e0;
      --color-text-secondary: #a0a0a0;
      --color-border: #333333;
      --color-success: #4caf50;
      --color-danger: #f44336;
      --color-warning: #ff9800;
    }
  }
  
  /* CSS Reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  /* ----------------------
     2. GRUNDLEGENDE ELEMENTE
     ---------------------- */
     
  html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
  }
  
  body {
    font-family: var(--font-family-base);
    line-height: var(--line-height-base);
    color: var(--color-gray-900);
    background-color: var(--color-gray-100);
    margin: 0;
    padding: var(--spacing-md);
    min-height: 100vh;
    transition: background-color var(--transition-base);
  }
  
  @media (prefers-color-scheme: dark) {
    body {
      color: var(--color-text);
      background-color: var(--color-background);
    }
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow);
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
    overflow-x: hidden; /* Verhindert horizontales Scrolling des Containers */
  }
  
  @media (prefers-color-scheme: dark) {
    .container {
      background-color: var(--color-surface);
      box-shadow: var(--box-shadow-lg);
    }
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* ----------------------
     3. TYPOGRAFIE
     ---------------------- */
     
  h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--spacing-md);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--color-gray-900);
  }
  
  @media (prefers-color-scheme: dark) {
    h1, h2, h3, h4, h5, h6 {
      color: var(--color-text);
    }
  }
  
  h1 {
    font-size: var(--font-size-h1);
    padding-bottom: var(--spacing-md);
    border-bottom: var(--border-width) solid var(--color-gray-200);
    margin-top: 0;
  }
  
  h2 {
    font-size: var(--font-size-h2);
    color: var(--color-gray-800);
  }
  
  h3 {
    font-size: var(--font-size-h3);
    color: var(--color-gray-700);
  }
  
  p {
    margin-bottom: var(--spacing-md);
  }
  
  a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  
  a:hover, a:focus {
    color: var(--color-primary-dark);
    text-decoration: underline;
  }
  
  a:focus {
    outline: 3px solid rgba(var(--color-primary-rgb), 0.3);
    outline-offset: 2px;
  }
  
  /* ----------------------
     4. GRID-SYSTEM
     ---------------------- */
     
  .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  
  .col {
    flex: 1 0 0%;
    padding-right: 15px;
    padding-left: 15px;
  }
  
  .col-auto {
    flex: 0 0 auto;
    width: auto;
  }
  
  .col-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  
  .col-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  
  .col-4 {
    flex: 0 0 auto;
    width: 33.333333%;
  }
  
  .col-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  
  /* ----------------------
     5. KOMPONENTEN
     ---------------------- */
     
  /* Cards */
  .card {
    border: var(--border-width) solid var(--color-gray-300);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
    background-color: var(--color-white);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  }
  
  .card:hover {
    box-shadow: var(--box-shadow);
  }
  
  .card-header {
    background-color: var(--color-gray-100);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: var(--border-width) solid var(--color-gray-300);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    font-weight: var(--font-weight-bold);
  }
  
  .card-body {
    padding: var(--spacing-lg);
  }
  
  .card-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-gray-100);
    border-top: var(--border-width) solid var(--color-gray-300);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
  }
  
  @media (prefers-color-scheme: dark) {
    .card {
      background-color: var(--color-surface);
      border-color: var(--color-border);
    }
    
    .card-header, .card-footer {
      background-color: rgba(255, 255, 255, 0.05);
      border-color: var(--color-border);
    }
  }
  
  /* Meldungen und Benachrichtigungen */
  .message, .alert {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius);
    position: relative;
  }
  
  .message.success, .alert-success, .success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
    font-weight: bold;
  }
  
  .message.error, .alert-error, .alert-danger, .error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c2c7;
    font-weight: bold;
  }
  
  .alert-warning, .warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
    font-weight: bold;
  }
  
  .alert-info, .info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
    font-weight: bold;
  }
  
  .processing-result {
    margin-top: 20px;
    padding: 15px;
    border-radius: var(--border-radius);
    background-color: var(--color-gray-100);
  }
  
  .message .close, .alert .close {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: inherit;
    opacity: 0.5;
    background: none;
    border: 0;
    cursor: pointer;
  }
  
  .message .close:hover, .alert .close:hover {
    opacity: 0.75;
  }
  
  /* Buttons */
  .button, .btn, button {
    display: inline-block;
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    color: var(--color-white);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: var(--color-button);
    border: var(--border-width) solid transparent;
    padding: 10px 20px;
    font-size: var(--font-size-base);
    border-radius: 4px;
    transition: color var(--transition-fast), background-color var(--transition-fast), 
      border-color var(--transition-fast), box-shadow var(--transition-fast);
    margin: var(--spacing-xs);
    position: relative;
    overflow: hidden;
  }
  
  .button::after, .btn::after, button::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
  }
  
  .button:hover::after, .btn:hover::after, button:hover::after {
    left: 100%;
  }
  
  .btn-primary, .button {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }
  
  .btn-primary:hover, .button:hover, button:hover {
    color: var(--color-white);
    background-color: var(--color-button-hover);
    border-color: var(--color-button-hover);
    text-decoration: none;
  }
  
  .btn-success {
    color: var(--color-white);
    background-color: var(--color-success);
    border-color: var(--color-success);
  }
  
  .btn-success:hover {
    color: var(--color-white);
    background-color: var(--color-success-dark);
    border-color: var(--color-success-dark);
  }
  
  .btn-danger, .button.delete {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
  }
  
  .btn-danger:hover, .button.delete:hover {
    color: var(--color-white);
    background-color: var(--color-danger-dark);
    border-color: var(--color-danger-dark);
  }
  
  .button.edit {
    color: var(--color-white);
    background-color: var(--color-primary);
    
  }
  
  .button.edit:hover {
    background-color: #e0a800;
    border-color: #d39e00;
  }
  
  .btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
  }
  
  .btn-lg {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
  }
  
  /* Neue kleine Button-Varianten für Tabellenzellen */
  .btn-xs, .button-xs {
    padding: 2px 6px;
    font-size: var(--font-size-xs);
    line-height: 1.2;
    border-radius: 3px;
    margin: 1px;
  }
  
  /* Spezielle Stile für Aktions-Buttons in Tabellen */
  .table-action-btn {
    padding: 3px 8px;
    font-size: var(--font-size-xs);
    margin: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
  }
  
  /* Button-Gruppe für Tabellenzellen */
  .table-btn-group {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0;
    background-color: transparent;
  }
  
  /* Icon-Buttons für kompakte Darstellung */
  .btn-icon, .button-icon {
    padding: 4px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin: 1px;
  }
  
  /* Stapel-Container für mehrere Buttons in einer Zelle */
  .table-actions-stack {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28px, auto));
    gap: 3px;
    margin: 0;
  }
  
  /* Hover-Effekt für Tabellenaktionen */
  .action-hover-group {
    opacity: 0.7;
    transition: opacity var(--transition-fast);
  }
  
  .action-hover-group:hover {
    opacity: 1;
  }
  
  /* Für responsive Tabellen - Buttons anpassen */
  @media (max-width: 768px) {
    .table-btn-group {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .table-action-btn {
      padding: 5px 10px;
      font-size: 13px;
    }
    
    .btn-icon, .button-icon {
      width: 30px;
      height: 30px;
    }
  }
  
  .btn:focus, .button:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25);
  }
  
  .button-container {
    margin-top: var(--spacing-lg);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
  }
  
  .action-buttons {
    display: flex;
    gap: var(--spacing-sm);
  }
  
  /* Loading-Indikator für Buttons */
  .btn-loading, .button-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
  }
  
  .btn-loading::after, .button-loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: calc(50% - 0.5rem);
    left: calc(50% - 0.5rem);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: white;
    animation: button-loading-spinner 0.6s linear infinite;
  }
  
  @keyframes button-loading-spinner {
    to {
      transform: rotate(360deg);
    }
  }
  
  /* Features */

  /* Hauptbereich */
main {
    padding: 20px;
    background-color: #ffffff;
}

main h1 {
    text-align: center;
    margin-top: 20px;
}

footer {
    background-color: #ffffff;
    color: #3b3b3b;
    text-align: center;
    padding: 10px 0;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.header {
    text-align: center;
    background-color: #f4f4f4;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

  .features, .why-us, .how-it-works, .cta {
    margin: 20px 0;
    text-align: center;
}
.feature, .benefit {
    margin-bottom: 20px;
}

ul {
    list-style: disc;
    margin: 10px auto; /* Center align the list */
    padding: 0;
    display: inline-block; /* Make the list behave like an inline element */
    text-align: left; /* Ensure items are left-aligned within the centered list */
}

ol {
    margin: 10px auto; /* Center align the list */
    padding: 0;
    display: inline-block; /* Make the list behave like an inline element */
    text-align: left; /* Ensure items are left-aligned within the centered list */
}

/* CSS für Sprachauswahl */
.language-selector form {
  margin: 0;
  padding: 0;
  display: inline-block;
}
.language-selector button {
  padding: 0;
  margin: 0;
}

/*Ende CSS für Sprachauswahl */

  /* Formular-Elemente */
  form {
    background-color: transparent; /* Geändert von #f4f4f4 zu transparent */
    padding: 0; /* Reduziertes Padding */
    border-radius: 5px;
    margin-bottom: var(--spacing-md); /* Reduzierter Margin */
  }
  
  /* Ausnahme für Hauptformulare, die einen Hintergrund behalten sollen */
  form.main-form, 
  form.search-form, 
  form:not([class]):not([style*="display:inline"]):not([style*="display: inline"]) {
    background-color: #f4f4f4;
    padding: 20px;
    margin-bottom: var(--spacing-lg);
  }
  
  /* Formulare in Tabellenzellen */
  td form, 
  .action-cell form,
  form[style*="display:inline"],
  form[style*="display: inline"] {
    background-color: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    display: inline-block;
  }
  
  .form-group {
    margin-bottom: var(--spacing-lg);
  }
  
  .form-label {
    display: inline-block;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-weight-bold);
  }
  
  .form-control {
    display: block;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-gray-900);
    background-color: var(--color-white);
    background-clip: padding-box;
    border: var(--border-width) solid var(--color-gray-400);
    border-radius: var(--border-radius);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }
  
  .form-control:focus {
    border-color: rgba(var(--color-primary-rgb), 0.8);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25);
  }
  
  .form-control::placeholder {
    color: var(--color-gray-500);
    opacity: 1;
  }
  
  .form-control:disabled, .form-control[readonly] {
    background-color: var(--color-gray-200);
    opacity: 1;
  }
  
  .form-control.is-invalid {
    border-color: var(--color-danger);
  }
  
  .form-control.is-valid {
    border-color: var(--color-success);
  }
  
  .invalid-feedback {
    display: none;
    width: 100%;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-danger);
  }
  
  .is-invalid ~ .invalid-feedback {
    display: block;
  }
  
  input[type="text"], 
  input[type="password"], 
  input[type="email"], 
  input[type="number"], 
  input[type="search"], 
  input[type="tel"], 
  input[type="url"], 
  textarea, 
  select {
    width: 100%;
    max-width: 400px;
    padding: var(--spacing-sm);
    border: var(--border-width) solid var(--color-gray-400);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }
  
  input[type="file"] {
    margin-bottom: 10px;
    display: block;
    width: 100%;
    max-width: 400px;
  }
  
  input[type="text"]:focus, 
  input[type="password"]:focus, 
  input[type="email"]:focus, 
  input[type="number"]:focus, 
  input[type="search"]:focus, 
  input[type="tel"]:focus, 
  input[type="url"]:focus, 
  textarea:focus, 
  select:focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25);
  }
  
  @media (prefers-color-scheme: dark) {
    input[type="text"], 
    input[type="password"], 
    input[type="email"], 
    input[type="number"], 
    input[type="search"], 
    input[type="tel"], 
    input[type="url"], 
    textarea, 
    select, 
    .form-control {
      background-color: rgba(255, 255, 255, 0.1);
      border-color: var(--color-border);
      color: var(--color-text);
    }
    
    input::placeholder, 
    textarea::placeholder, 
    .form-control::placeholder {
      color: var(--color-text-secondary);
    }
  }
  
  /* Checkboxen und Radio-Buttons */
  .form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.75rem;
    margin-bottom: var(--spacing-sm);
  }
  
  .form-check-input {
    position: absolute;
    margin-top: 0.25rem;
    margin-left: -1.75rem;
    width: 1rem;
    height: 1rem;
    appearance: none;
    background-color: var(--color-white);
    border: var(--border-width) solid var(--color-gray-400);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
  }
  
  .form-check-input[type="checkbox"] {
    border-radius: var(--spacing-xs);
  }
  
  .form-check-input[type="radio"] {
    border-radius: 50%;
  }
  
  .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }
  
  .form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23fff' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
  }
  
  .form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='4' fill='%23fff'/%3e%3c/svg%3e");
  }
  
  .form-check-input:focus {
    border-color: rgba(var(--color-primary-rgb), 0.8);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25);
  }
  
  .form-check-label {
    display: inline-block;
  }
  
  @media (prefers-color-scheme: dark) {
    .form-check-input {
      background-color: rgba(255, 255, 255, 0.1);
      border-color: var(--color-border);
    }
  }
  
  /* Suchformular */
  .search-form {
    margin: var(--spacing-lg) 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
    background-color: #f4f4f4;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
  }
  
  .search-form input {
    flex: 1;
    min-width: 200px;
    padding: var(--spacing-sm) var(--spacing-md);
    border: var(--border-width) solid var(--color-gray-400);
    border-radius: var(--border-radius);
  }
  
  .search-form button {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-fast);
  }
  
  .search-form button:hover {
    background: var(--color-primary-dark);
  }
  
  /* Tabellen */
  table, .table {
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--spacing-lg);
    border-collapse: separate;
    border-spacing: 0;
    border: var(--border-width) solid var(--color-gray-300);
    border-radius: var(--border-radius);
    overflow: hidden;
  }
  
  table thead th, .table thead th {
    position: sticky;
    top: 0;
    background-color: var(--color-gray-100);
    z-index: 1;
  }
  
  table th, table td, .table th, .table td {
    padding: var(--spacing-md);
    border-bottom: var(--border-width) solid var(--color-gray-300);
    text-align: left;
  }
  
  table th, .table th {
    font-weight: var(--font-weight-bold);
    background-color: var(--color-gray-100);
    color: var(--color-gray-800);
    border-bottom: 2px solid var(--color-gray-400);
  }
  
  .table tr:last-child td {
    border-bottom: none;
  }
  
  .table tr:hover {
    background-color: rgba(var(--color-primary-rgb), 0.05);
  }
  
  .table tr:nth-child(even) {
    background-color: var(--color-gray-100);
  }
  
  .table tr:nth-child(even):hover {
    background-color: rgba(var(--color-primary-rgb), 0.08);
  }
  
  table th a {
    text-decoration: none;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
  }
  
  table th a:hover {
    text-decoration: underline;
  }
  
  table th a.sort-asc::after {
    content: "↑";
    display: inline-block;
  }
  
  table th a.sort-desc::after {
    content: "↓";
    display: inline-block;
  }
  
  /* Verbesserte Tabellenresponsivität */
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--spacing-lg);
  }
  
  /* Spezifisch für die Tabellen mit vielen Spalten */
  .table-responsive-cards {
    overflow-x: auto;
    width: 100%;
    margin-bottom: var(--spacing-lg);
  }
  
  .table-responsive-cards table {
    min-width: 100%;
    width: auto;
  }
  
  /* Für sehr schmale Bildschirme einen horizontalen Scroll hinzufügen */
  .table-fixed-actions {
    min-width: 100%;
    width: auto;
    table-layout: auto;
  }
  
  @media (prefers-color-scheme: dark) {
    table, .table {
      border-color: var(--color-border);
    }
    
    table th, .table th {
      background-color: rgba(255, 255, 255, 0.05);
      color: var(--color-text);
      border-bottom-color: var(--color-border);
    }
    
    table td, .table td {
      border-bottom-color: var(--color-border);
    }
    
    .table tr:nth-child(even) {
      background-color: rgba(255, 255, 255, 0.03);
    }
    
    .table tr:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
    
    .table tr:nth-child(even):hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
  
  /* Tabellenzelle mit kompakten Button-Gruppen */
  td.action-cell {
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: right;
    white-space: nowrap;
    background-color: transparent !important;
  }
  
  /* Entfernen des grauen Hintergrunds für Aktionszellen */
  .table tr:nth-child(even) td.action-cell {
    background-color: transparent !important;
  }
  
  /* Buttons innerhalb von Tabellenzellen sollten kleinere Margins haben */
  td .button, td .btn, td button {
    margin: 1px;
  }
  
  /* Tabellenzellen mit fester Button-Spalte */
  .table-fixed-actions th:last-child,
  .table-fixed-actions td:last-child {
    position: sticky;
    right: 0;
    background-color: var(--color-white);
    border-left: 2px solid var(--color-gray-300);
    z-index: 2;
    box-shadow: -5px 0 5px -2px rgba(0,0,0,0.1);
  }
  
  /* Für gerade Zeilen */
  .table-fixed-actions tr:nth-child(even) td:last-child {
    background-color: var(--color-gray-100);
  }
  
  @media (prefers-color-scheme: dark) {
    .table-fixed-actions th:last-child,
    .table-fixed-actions td:last-child {
      background-color: var(--color-surface);
      border-left: 2px solid var(--color-border);
    }
    
    .table-fixed-actions tr:nth-child(even) td:last-child {
      background-color: rgba(255, 255, 255, 0.03);
    }
  }
  
  /* Verbesserte mobile Tabellenansicht */
  @media (max-width: 768px) {
    .table-responsive-cards thead {
      display: none;
    }
    
    .table-responsive-cards tbody,
    .table-responsive-cards tr {
      display: block;
      width: 100%;
    }
    
    .table-responsive-cards tr {
      margin-bottom: var(--spacing-md);
      border: 1px solid var(--color-gray-300);
      border-radius: var(--border-radius);
      padding: var(--spacing-sm);
      background-color: var(--color-white);
      box-shadow: var(--box-shadow-sm);
    }
    
    .table-responsive-cards td {
      display: flex;
      justify-content: space-between;
      padding: var(--spacing-xs) var(--spacing-sm);
      border: none;
      border-bottom: 1px solid var(--color-gray-200);
      text-align: right;
    }
    
    .table-responsive-cards td:last-child {
      border-bottom: none;
    }
    
    .table-responsive-cards td::before {
      content: attr(data-label);
      font-weight: var(--font-weight-bold);
      margin-right: auto;
      text-align: left;
    }
    
    /* Spezielle Behandlung für Aktions-Buttons */
    .table-responsive-cards td.action-cell {
      justify-content: center;
      padding: var(--spacing-sm);
      margin-top: var(--spacing-sm);
      border-radius: var(--border-radius);
      background-color: transparent !important;
    }
    
    .table-responsive-cards .action-buttons,
    .table-responsive-cards .table-btn-group {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--spacing-sm);
      width: 100%;
    }
    
    /* Responsive Anpassungen für kleine Screens */
    .table-responsive-cards .table-btn-group form {
      flex: 1 1 calc(50% - var(--spacing-sm));
      min-width: 120px;
    }
    
    .table-responsive-cards .table-btn-group button {
      width: 100%;
    }
  }
  
  /* Anpassungen für sehr kleine Bildschirme */
  @media (max-width: 480px) {
    .table-responsive-cards .table-btn-group form {
      flex: 1 1 100%;
    }
    
    .table-action-btn {
      width: 100%;
      padding: var(--spacing-sm);
      font-size: var(--font-size-sm);
      margin-bottom: 3px;
    }
    
    /* Für den Container */
    .container {
      padding: var(--spacing-sm);
    }
  }
  
  /* ----------------------
     6. NAVIGATION & MENÜ
     ---------------------- */
  
  header {
    background-color: var(--color-gray-200);
    color: var(--color-gray-900);
    position: sticky;
    top: 0;
    z-index: var(--z-index-sticky);
    padding: var(--spacing-xs) 0;
    box-shadow: var(--box-shadow-sm);
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
  }
  
  @media (prefers-color-scheme: dark) {
    header {
      background-color: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }
  }
  
  .main-menu {
    background-color: var(--color-gray-700);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    position: relative;
  }
  
  .main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
  }
  
  .main-menu li {
    margin: 0 var(--spacing-md);
    position: relative;
  }
  
  .main-menu a {
    color: var(--color-white);
    background-color: var(--color-gray-600);
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-md);
    display: block;
    border-radius: var(--border-radius);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
  }
  
  .main-menu a:hover {
    background-color: var(--color-gray-800);
    transform: translateY(-2px);
  }
  
  .main-menu a:active {
    transform: translateY(0);
  }
  
  .hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    width: 30px;
    height: 24px;
    justify-content: space-between;
    z-index: var(--z-index-dropdown);
  }
  
  .hamburger div {
    width: 100%;
    height: 3px;
    background-color: var(--color-white);
    transition: all var(--transition-fast);
    border-radius: 3px;
  }
  
  .hamburger.active div:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
  }
  
  .hamburger.active div:nth-child(2) {
    opacity: 0;
  }
  
  .hamburger.active div:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
  }
  
  /* Logo-Styles */
  .logo img {
    height: 50px;
    transition: height var(--transition-base);
    max-width: 100%;
  }
  
  .logo-container {
    display: flex;
    align-items: center;
  }
  
  /* Spezifische Styles für Logo-Links */
  .logo a, 
  .logo-container a, 
  .main-menu .logo a {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    color: inherit;
    display: inline-block;
  }
  
  .logo a:hover, 
  .logo-container a:hover,
  .main-menu .logo a:hover {
    background-color: transparent;
    text-decoration: none;
    transform: none;
    box-shadow: none;
  }
  
  .logo a::after, 
  .logo-container a::after,
  .main-menu .logo a::after {
    display: none; /* Entfernt den Hover-Effekt */
  }
  
  /* Navigations-Breadcrumbs */
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-lg);
    list-style: none;
  }
  
  .breadcrumb-item {
    display: flex;
    align-items: center;
  }
  
  .breadcrumb-item + .breadcrumb-item {
    padding-left: var(--spacing-sm);
  }
  
  .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding-right: var(--spacing-sm);
    color: var(--color-gray-500);
  }
  
  .breadcrumb-item.active {
    color: var(--color-gray-600);
  }
  
  /* ----------------------
     7. HILFSKLASSEN
     ---------------------- */
  
  /* Margin-Hilfsklassen */
  .mt-0 { margin-top: 0 !important; }
  .mt-1 { margin-top: var(--spacing-xs) !important; }
  .mt-2 { margin-top: var(--spacing-sm) !important; }
  .mt-3 { margin-top: var(--spacing-md) !important; }
  .mt-4 { margin-top: var(--spacing-lg) !important; }
  .mt-5 { margin-top: var(--spacing-xl) !important; }
  .mb-0 { margin-bottom: 0 !important; }
  .mb-1 { margin-bottom: var(--spacing-xs) !important; }
  .mb-2 { margin-bottom: var(--spacing-sm) !important; }
  .mb-3 { margin-bottom: var(--spacing-md) !important; }
  .mb-4 { margin-bottom: var(--spacing-lg) !important; }
  .mb-5 { margin-bottom: var(--spacing-xl) !important; }
  
  .ml-0 { margin-left: 0 !important; }
  .ml-1 { margin-left: var(--spacing-xs) !important; }
  .ml-2 { margin-left: var(--spacing-sm) !important; }
  .ml-3 { margin-left: var(--spacing-md) !important; }
  .ml-4 { margin-left: var(--spacing-lg) !important; }
  .ml-5 { margin-left: var(--spacing-xl) !important; }
  
  .mr-0 { margin-right: 0 !important; }
  .mr-1 { margin-right: var(--spacing-xs) !important; }
  .mr-2 { margin-right: var(--spacing-sm) !important; }
  .mr-3 { margin-right: var(--spacing-md) !important; }
  .mr-4 { margin-right: var(--spacing-lg) !important; }
  .mr-5 { margin-right: var(--spacing-xl) !important; }
  
  .mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-1 { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
  .mx-2 { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
  .mx-3 { margin-left: var(--spacing-md) !important; margin-right: var(--spacing-md) !important; }
  .mx-4 { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }
  .mx-5 { margin-left: var(--spacing-xl) !important; margin-right: var(--spacing-xl) !important; }
  
  .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
  .my-1 { margin-top: var(--spacing-xs) !important; margin-bottom: var(--spacing-xs) !important; }
  .my-2 { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
  .my-3 { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }
  .my-4 { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
  .my-5 { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }
  
  .m-0 { margin: 0 !important; }
  .m-1 { margin: var(--spacing-xs) !important; }
  .m-2 { margin: var(--spacing-sm) !important; }
  .m-3 { margin: var(--spacing-md) !important; }
  .m-4 { margin: var(--spacing-lg) !important; }
  .m-5 { margin: var(--spacing-xl) !important; }
  
  /* Padding-Hilfsklassen */
  .pt-0 { padding-top: 0 !important; }
  .pt-1 { padding-top: var(--spacing-xs) !important; }
  .pt-2 { padding-top: var(--spacing-sm) !important; }
  .pt-3 { padding-top: var(--spacing-md) !important; }
  .pt-4 { padding-top: var(--spacing-lg) !important; }
  .pt-5 { padding-top: var(--spacing-xl) !important; }
  
  .pb-0 { padding-bottom: 0 !important; }
  .pb-1 { padding-bottom: var(--spacing-xs) !important; }
  .pb-2 { padding-bottom: var(--spacing-sm) !important; }
  .pb-3 { padding-bottom: var(--spacing-md) !important; }
  .pb-4 { padding-bottom: var(--spacing-lg) !important; }
  .pb-5 { padding-bottom: var(--spacing-xl) !important; }
  
  .pl-0 { padding-left: 0 !important; }
  .pl-1 { padding-left: var(--spacing-xs) !important; }
  .pl-2 { padding-left: var(--spacing-sm) !important; }
  .pl-3 { padding-left: var(--spacing-md) !important; }
  .pl-4 { padding-left: var(--spacing-lg) !important; }
  .pl-5 { padding-left: var(--spacing-xl) !important; }
  
  .pr-0 { padding-right: 0 !important; }
  .pr-1 { padding-right: var(--spacing-xs) !important; }
  .pr-2 { padding-right: var(--spacing-sm) !important; }
  .pr-3 { padding-right: var(--spacing-md) !important; }
  .pr-4 { padding-right: var(--spacing-lg) !important; }
  .pr-5 { padding-right: var(--spacing-xl) !important; }
  
  .px-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-1 { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
  .px-2 { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
  .px-3 { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
  .px-4 { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
  .px-5 { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }
  
  .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-1 { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
  .py-2 { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
  .py-3 { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
  .py-4 { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
  .py-5 { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }
  
  .p-0 { padding: 0 !important; }
  .p-1 { padding: var(--spacing-xs) !important; }
  .p-2 { padding: var(--spacing-sm) !important; }
  .p-3 { padding: var(--spacing-md) !important; }
  .p-4 { padding: var(--spacing-lg) !important; }
  .p-5 { padding: var(--spacing-xl) !important; }
  
  /* Text-Ausrichtung */
  .text-left { text-align: left !important; }
  .text-center { text-align: center !important; }
  .text-right { text-align: right !important; }
  .text-justify { text-align: justify !important; }
  
  /* Schriftgröße */
  .text-xs { font-size: var(--font-size-xs) !important; }
  .text-sm { font-size: var(--font-size-sm) !important; }
  .text-md { font-size: var(--font-size-base) !important; }
  .text-lg { font-size: var(--font-size-lg) !important; }
  .text-xl { font-size: var(--font-size-xl) !important; }
  
  /* Schriftgewicht */
  .font-normal { font-weight: var(--font-weight-normal) !important; }
  .font-bold { font-weight: var(--font-weight-bold) !important; }
  
  /* Textfarben */
  .text-primary { color: var(--color-primary) !important; }
  .text-secondary { color: var(--color-secondary) !important; }
  .text-success { color: #155724 !important; }
  .text-danger { color: #721c24 !important; }
  .text-warning { color: #856404 !important; }
  .text-info { color: #0c5460 !important; }
  .text-light { color: var(--color-gray-100) !important; }
  .text-dark { color: var(--color-gray-900) !important; }
  .text-muted { color: var(--color-gray-600) !important; }
  
  /* Hintergrund-Farben */
  .bg-primary { background-color: var(--color-primary) !important; }
  .bg-secondary { background-color: var(--color-secondary) !important; }
  .bg-success { background-color: #d4edda !important; }
  .bg-danger { background-color: #f8d7da !important; }
  .bg-warning { background-color: #fff3cd !important; }
  .bg-info { background-color: #d1ecf1 !important; }
  .bg-light { background-color: var(--color-gray-100) !important; }
  .bg-dark { background-color: var(--color-gray-900) !important; }
  .bg-white { background-color: var(--color-white) !important; }
  
  /* Anzeige-Hilfsklassen */
  .d-none { display: none !important; }
  .d-inline { display: inline !important; }
  .d-inline-block { display: inline-block !important; }
  .d-block { display: block !important; }
  .d-flex { display: flex !important; }
  .d-inline-flex { display: inline-flex !important; }
  .d-grid { display: grid !important; }
  
  /* Flexbox-Hilfsklassen */
  .flex-row { flex-direction: row !important; }
  .flex-column { flex-direction: column !important; }
  .flex-wrap { flex-wrap: wrap !important; }
  .flex-nowrap { flex-wrap: nowrap !important; }
  .justify-content-start { justify-content: flex-start !important; }
  .justify-content-end { justify-content: flex-end !important; }
  .justify-content-center { justify-content: center !important; }
  .justify-content-between { justify-content: space-between !important; }
  .justify-content-around { justify-content: space-around !important; }
  .align-items-start { align-items: flex-start !important; }
  .align-items-end { align-items: flex-end !important; }
  .align-items-center { align-items: center !important; }
  .align-items-baseline { align-items: baseline !important; }
  .align-items-stretch { align-items: stretch !important; }
  .align-self-start { align-self: flex-start !important; }
  .align-self-end { align-self: flex-end !important; }
  .align-self-center { align-self: center !important; }
  .align-self-baseline { align-self: baseline !important; }
  .align-self-stretch { align-self: stretch !important; }
  .flex-grow-0 { flex-grow: 0 !important; }
  .flex-grow-1 { flex-grow: 1 !important; }
  .flex-shrink-0 { flex-shrink: 0 !important; }
  .flex-shrink-1 { flex-shrink: 1 !important; }
  
  /* Position-Hilfsklassen */
  .position-static { position: static !important; }
  .position-relative { position: relative !important; }
  .position-absolute { position: absolute !important; }
  .position-fixed { position: fixed !important; }
  .position-sticky { position: sticky !important; }
  
  /* Sichtbarkeit-Hilfsklassen */
  .visible { visibility: visible !important; }
  .invisible { visibility: hidden !important; }
  
  /* Overflow-Hilfsklassen */
  .overflow-auto { overflow: auto !important; }
  .overflow-hidden { overflow: hidden !important; }
  .overflow-visible { overflow: visible !important; }
  .overflow-scroll { overflow: scroll !important; }
  
  /* Border-Hilfsklassen */
  .border { border: var(--border-width) solid var(--color-gray-300) !important; }
  .border-top { border-top: var(--border-width) solid var(--color-gray-300) !important; }
  .border-right { border-right: var(--border-width) solid var(--color-gray-300) !important; }
  .border-bottom { border-bottom: var(--border-width) solid var(--color-gray-300) !important; }
  .border-left { border-left: var(--border-width) solid var(--color-gray-300) !important; }
  .border-0 { border: 0 !important; }
  .border-top-0 { border-top: 0 !important; }
  .border-right-0 { border-right: 0 !important; }
  .border-bottom-0 { border-bottom: 0 !important; }
  .border-left-0 { border-left: 0 !important; }
  .border-primary { border-color: var(--color-primary) !important; }
  .border-secondary { border-color: var(--color-secondary) !important; }
  .border-success { border-color: var(--color-success) !important; }
  .border-danger { border-color: var(--color-danger) !important; }
  .border-warning { border-color: var(--color-warning) !important; }
  .border-info { border-color: var(--color-info) !important; }
  .border-light { border-color: var(--color-gray-100) !important; }
  .border-dark { border-color: var(--color-gray-900) !important; }
  
  /* Rounded-Hilfsklassen */
  .rounded { border-radius: var(--border-radius) !important; }
  .rounded-top { 
    border-top-left-radius: var(--border-radius) !important;
    border-top-right-radius: var(--border-radius) !important;
  }
  .rounded-right { 
    border-top-right-radius: var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
  }
  .rounded-bottom { 
    border-bottom-right-radius: var(--border-radius) !important;
    border-bottom-left-radius: var(--border-radius) !important;
  }
  .rounded-left { 
    border-top-left-radius: var(--border-radius) !important;
    border-bottom-left-radius: var(--border-radius) !important;
  }
  .rounded-circle { border-radius: 50% !important; }
  .rounded-0 { border-radius: 0 !important; }
  .rounded-lg { border-radius: var(--border-radius-lg) !important; }
  .rounded-pill { border-radius: 50rem !important; }
  
  /* ----------------------
     8. RESPONSIVE DESIGN
     ---------------------- */
  @media (max-width: 992px) {
    .container {
      max-width: 100%;
      padding: var(--spacing-md);
    }
    
    h1 {
      font-size: 22px;
    }
    
    .card-body {
      padding: var(--spacing-md);
    }
  }
  
  @media (max-width: 768px) {
    body {
      padding: var(--spacing-sm);
    }
    
    .container {
      padding: var(--spacing-md);
      margin: 0;
      border-radius: var(--border-radius);
    }
    
    .row {
      margin-right: -10px;
      margin-left: -10px;
    }
    
    .col, .col-auto, .col-12, .col-6, .col-4, .col-3 {
      padding-right: 10px;
      padding-left: 10px;
    }
    
    .hamburger {
      display: flex;
    }
    
    .main-menu ul {
      display: none; /* Hide menu by default */
      flex-direction: column;
      background-color: var(--color-gray-700);
      position: absolute;
      top: 100%;
      right: 0;
      width: 220px;
      box-shadow: var(--box-shadow);
      border-radius: var(--border-radius);
      z-index: var(--z-index-dropdown);
      padding: var(--spacing-sm);
    }
    
    .main-menu ul.active {
      display: flex; /* Show when active */
    }
    
    .main-menu li {
      text-align: right;
      margin: var(--spacing-xs) 0;
    }
    
    .main-menu a {
      padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .logo.shrink img {
      height: 30px; /* Smaller logo when menu is active */
    }
    
    .logo img {
      height: 40px; /* Default logo size for mobile */
    }
    
    /* Button-Anpassungen für mobile Ansicht */
    .button-container, .action-buttons {
      flex-direction: column;
      align-items: stretch;
    }
    
    .button, .btn {
      margin: var(--spacing-xs) 0;
      text-align: center;
      display: block;
    }
  }
    
  /* Verbesserte Tabellenansicht für kleinste Bildschirme */
  @media (max-width: 480px) {
    body {
      padding: var(--spacing-xs);
    }
    
    .container {
      padding: var(--spacing-sm);
      margin: 0;
      border-radius: var(--border-radius);
    }
  
    h1 {
      font-size: var(--font-size-lg);
      padding-bottom: var(--spacing-sm);
    }
    
    h2 {
      font-size: var(--font-size-base);
    }
    
    .logo img {
      height: 30px;
    }
    
    table th, table td, .table th, .table td {
      padding: var(--spacing-xs);
      font-size: var(--font-size-xs);
    }
    
    .card-header, .card-body, .card-footer {
      padding: var(--spacing-sm);
    }
    
    .button, .btn {
      padding: var(--spacing-xs) var(--spacing-sm);
      font-size: var(--font-size-sm);
    }
    
    .breadcrumb {
      font-size: var(--font-size-sm);
    }
  }
  
  /* ----------------------
     9. PRINT-OPTIMIERUNGEN
     ---------------------- */
  
  @media print {
    body {
      background-color: #fff;
      color: #000;
      font-size: 12pt;
      padding: 0;
      margin: 0;
    }
    
    .container {
      max-width: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      border: none;
      box-shadow: none;
      background: none;
    }
    
    header, 
    .main-menu, 
    .hamburger, 
    .search-form button, 
    .button-container,
    .action-buttons,
    .btn,
    .button {
      display: none !important;
    }
    
    h1, h2, h3 {
      page-break-after: avoid;
      page-break-inside: avoid;
    }
    
    table {
      page-break-inside: auto;
    }
    
    tr {
      page-break-inside: avoid;
      page-break-after: auto;
    }
    
    a {
      color: #000;
      text-decoration: underline;
    }
    
    table, .table {
      border-collapse: collapse;
      width: 100%;
      border: 1px solid #000;
    }
    
    table th, table td, .table th, .table td {
      border: 1px solid #000;
      padding: 8pt;
    }
    
    .card {
      border: 1px solid #000;
      margin-bottom: 20pt;
      box-shadow: none;
    }
    
    .card-header {
      border-bottom: 1px solid #000;
      background: none;
      font-weight: bold;
    }
    
    /* Füge URL nach Links hinzu */
    a[href]:after {
      content: " (" attr(href) ")";
      font-size: 90%;
    }
    
    /* Aber nicht für interne Links */
    a[href^="#"]:after {
      content: "";
    }
    
    img {
      max-width: 100% !important;
    }
    
    p, h2, h3 {
      orphans: 3;
      widows: 3;
    }
    
    @page {
      margin: 2cm;
    }
  }
  
  /* ----------------------
     10. JAVASCRIPT UNTERSTÜTZUNG
     ---------------------- */
  
  /* Fade-In Animation */
  .fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  /* Accordion */
  .accordion {
    margin-bottom: var(--spacing-lg);
  }
  
  .accordion-header {
    padding: var(--spacing-md);
    background-color: var(--color-gray-100);
    border: var(--border-width) solid var(--color-gray-300);
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--transition-fast);
  }
  
  .accordion-header:hover {
    background-color: var(--color-gray-200);
  }
  
  .accordion-header::after {
    content: "+";
    font-size: 1.5rem;
    line-height: 1;
  }
  
  .accordion-header.active::after {
    content: "-";
  }
  
  .accordion-content {
    display: none;
    padding: var(--spacing-md);
    border: var(--border-width) solid var(--color-gray-300);
    border-top: none;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
  }
  
  .accordion-header.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  
  .accordion-content.active {
    display: block;
  }
  
  /* Modal */
  .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-index-modal);
    display: none;
  }
  
  .modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-lg);
    max-width: 90%;
    width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    z-index: calc(var(--z-index-modal) + 1);
    display: none;
  }
  
  .modal-header {
    padding: var(--spacing-md);
    border-bottom: var(--border-width) solid var(--color-gray-300);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .modal-title {
    margin: 0;
    font-weight: var(--font-weight-bold);
  }
  
  .modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
  }
  
  .modal-close:hover {
    opacity: 1;
  }
  
  .modal-body {
    padding: var(--spacing-lg);
  }
  
  .modal-footer {
    padding: var(--spacing-md);
    border-top: var(--border-width) solid var(--color-gray-300);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
  }
  
  .modal.show,
  .modal-backdrop.show {
    display: block;
  }
  
  /* Tooltip */
  .tooltip {
    position: relative;
    display: inline-block;
  }
  
  .tooltip .tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: var(--color-gray-900);
    color: var(--color-white);
    text-align: center;
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
    position: absolute;
    z-index: var(--z-index-tooltip);
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity var(--transition-fast);
    font-size: var(--font-size-sm);
    pointer-events: none;
  }
  
  .tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-gray-900) transparent transparent transparent;
  }
  
  .tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
  
  /* Spinner/Loader */
  .spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(var(--color-primary-rgb), 0.3);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  
  .spinner-sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
  }
  
  .spinner-lg {
    width: 60px;
    height: 60px;
    border-width: 6px;
  }
  
  .spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg);
  }
  
  /* Progress Bar */
  .progress {
    display: flex;
    height: 20px;
    overflow: hidden;
    background-color: var(--color-gray-200);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
  }
  
  .progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--color-white);
    text-align: center;
    white-space: nowrap;
    background-color: var(--color-primary);
    transition: width var(--transition-base);
  }
  
  /* Toast Notifications */
  .toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: var(--z-index-tooltip);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .toast {
    width: 300px;
    background-color: var(--color-white);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    opacity: 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    transform: translateX(100%);
  }
  
  .toast.show {
    opacity: 1;
    transform: translateX(0);
  }
  
  .toast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: var(--border-width) solid var(--color-gray-200);
  }
  
  .toast-body {
    padding: var(--spacing-md);
  }
  
  .toast-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
  }
  
  .toast-close:hover {
    opacity: 1;
  }
  
  /* ----------------------
     11. BARRIEREFREIHEIT
     ---------------------- */
  
  /* Fokus-Zustände für Tastaturbedienung */
  :focus-visible {
    outline: 3px solid rgba(var(--color-primary-rgb), 0.5);
    outline-offset: 2px;
  }
  
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  
  /* Skip-Link für Tastaturnutzer */
  .skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: var(--z-index-modal);
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--spacing-md);
    text-decoration: none;
  }
  
  .skip-to-content:focus {
    left: 0;
    width: auto;
    height: auto;
    overflow: visible;
  }
  
  /* High Contrast Mode */
  @media (forced-colors: active) {
    .button, .btn, a {
      forced-color-adjust: none;
    }
    
    .card, .table, .message, .alert {
      border: 2px solid;
    }
  }
  
  /* Reduced Motion */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    
    .button::after, .btn::after {
      display: none;
    }
  }
  
  /* ----------------------
     12. ZUSÄTZLICHE VERBESSERUNGEN
     ---------------------- */
  
  /* Verbesserte 3D-Effekte für Karten */
  .card-3d {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
  }
  
  .card-3d:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  }
  
  /* Glassmorphism-Effekt */
  .glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  @media (prefers-color-scheme: dark) {
    .glass {
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
  }
  
  /* Retina/hochauflösende Displays Optimierungen */
  @media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) {
    body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
  
  /* Badges */
  .badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 75%;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50rem;
    background-color: var(--color-gray-500);
    color: var(--color-white);
  }
  
  .badge-primary { background-color: var(--color-primary); }
  .badge-secondary { background-color: var(--color-secondary); }
  .badge-success { background-color: var(--color-success); }
  .badge-danger { background-color: var(--color-danger); }
  .badge-warning { background-color: var(--color-warning); color: var(--color-gray-900); }
  .badge-info { background-color: var(--color-info); }
  
  /* Animierte Underlines für Links */
  .link-animated {
    position: relative;
    text-decoration: none;
  }
  
  .link-animated::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
  }
  
  .link-animated:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
  
  /* Custom Checkboxen und Radiobuttons */
  .custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.75rem;
    margin-bottom: var(--spacing-sm);
  }
  
  .custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }
  
  .custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
    cursor: pointer;
  }
  
  .custom-control-label::before {
    position: absolute;
    top: 0.25rem;
    left: -1.75rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background-color: var(--color-white);
    border: var(--border-width) solid var(--color-gray-400);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
  }
  
  .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }
  
  .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25);
  }
  
  .custom-checkbox .custom-control-label::before {
    border-radius: var(--spacing-xs);
  }
  
  .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    position: absolute;
    top: 0.25rem;
    left: -1.75rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23fff' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  
  .custom-radio .custom-control-label::before {
    border-radius: 50%;
  }
  
  .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    position: absolute;
    top: 0.25rem;
    left: -1.75rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='4' fill='%23fff'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  
  /* Spezifische Styles für Formulare in Tabellen, um grauen Hintergrund zu vermeiden */
  td form {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: inline-block !important;
  }
  
  .table-btn-group form {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: auto;
  }