/* =============================================================================
   SPESENABRECHNUNG - HAUPTSTYLESHEET
   =============================================================================
   
   WICHTIGE HINWEISE:
   - Dieses Stylesheet enthält alle grundlegenden Styles für die Spesenabrechnung
   - Mobile-First Ansatz: Responsive Design für alle Bildschirmgrößen
   - Bootstrap-Integration: Verwendet Bootstrap-Klassen als Basis
   - Kundenverwaltung: Spezielle Styles für Auto-Complete und Mobile-Optimierung
   - Accessibility: ARIA-konforme Styles für Screen Reader
   
   STRUKTUR:
   1. Globale Styles (Body, Container, etc.)
   2. Mobile Kundenverwaltung
   3. Navigation und Header
   4. Formulare und Eingabefelder
   5. Tabellen und Datenanzeige
   6. Buttons und Interaktionen
   7. Modals und Overlays
   8. Responsive Breakpoints
   
   ============================================================================= */

body {
    background: linear-gradient(135deg, #091123 0%, #0fd6b0 100%);
    min-height: 100vh;
    font-family: 'Segoe UI', Arial, sans-serif;
    padding-bottom: 60px; /* Höhe des Footers */
    padding-top: 90px; /* Abstand für das Menü, etwas mehr als die Navbar */
    transition: background 0.3s ease, color 0.3s ease; /* Smooth transition für Dark Mode */
  }

  /* =============================================================================
     DARK MODE STYLES
     =============================================================================
     
     WICHTIGE HINWEISE:
     - Dark Mode Styles ohne Beeinflussung der bestehenden Logiken
     - CSS Custom Properties für einfache Theme-Umschaltung
     - Smooth Transitions für bessere User Experience
     - Accessibility: Kontrastreiche Farben für bessere Lesbarkeit
     
     KRITISCHE ABHÄNGIGKEITEN:
     - JavaScript: toggleDarkMode() Funktion für Theme-Umschaltung
     - CSS Custom Properties: --bs-* Variablen für konsistente Farben
     - Bootstrap: Dark Mode kompatibel mit Bootstrap-Komponenten
     
     ============================================================================= */

  /* Dark Mode Variablen */
  :root {
    --dark-bg-primary: #1a1a1a;
    --dark-bg-secondary: #2d2d2d;
    --dark-bg-tertiary: #3a3a3a;
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #b0b0b0;
    --dark-border: #4a4a4a;
    --dark-shadow: rgba(0, 0, 0, 0.5);
  }

  /* Dark Mode Body */
  body.dark-mode {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a3a2e 100%);
    color: var(--dark-text-primary);
  }

  /* Dark Mode Cards */
  body.dark-mode .card {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
  }

  /* Dark Mode Spesen-Card (Haupt-Container) */
  body.dark-mode .spesen-card {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    box-shadow: 0 2px 16px 0 var(--dark-shadow);
  }

  /* # Erweiterung: Chart-Container */
  #customerHoursChartWrapper {
    position: relative;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }

  #customerHoursChart {
    max-width: 180px;
    max-height: 180px;
  }

  #customerHoursChartEmpty {
    text-align: center;
  }

  body.dark-mode #customerHoursChartEmpty {
    color: var(--dark-text-secondary) !important;
  }

  /* Dark Mode Form Controls */
  body.dark-mode .form-control {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
  }

  body.dark-mode .form-control:focus {
    background-color: var(--dark-bg-tertiary);
    border-color: #0fd6b0;
    color: var(--dark-text-primary);
    box-shadow: 0 0 0 0.2rem rgba(15, 214, 176, 0.25);
  }

/* # Erweiterung: Dark Mode Stil für Dropdowns */
body.dark-mode .form-select {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
}

body.dark-mode .form-select:focus {
  background-color: var(--dark-bg-tertiary);
  border-color: #0fd6b0;
  color: var(--dark-text-primary);
  box-shadow: 0 0 0 0.2rem rgba(15, 214, 176, 0.25);
}

  /* Dark Mode Buttons */
  body.dark-mode .btn {
    border-color: var(--dark-border);
  }

  body.dark-mode .btn-outline-primary {
    color: #0fd6b0;
    border-color: #0fd6b0;
  }

  body.dark-mode .btn-outline-primary:hover {
    background-color: #0fd6b0;
    border-color: #0fd6b0;
    color: #000;
  }

  /* Dark Mode Tables */
  body.dark-mode .table {
    color: var(--dark-text-primary);
    background-color: var(--dark-bg-secondary);
  }

  body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--dark-bg-tertiary);
  }

  body.dark-mode .table > thead > tr > th {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border-color: #2a2a2a; /* Dunklere Borders für bessere Lesbarkeit */
  }

  body.dark-mode .table > tbody > tr > td {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: #2a2a2a; /* Dunklere Borders für bessere Lesbarkeit */
  }

  body.dark-mode .table > tbody > tr:hover > td {
    background-color: var(--dark-bg-tertiary);
  }

  /* Dark Mode Spesen-Tabelle (spezifische Tabelle) */
  body.dark-mode #spesenTabelle {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
  }

  body.dark-mode #spesenTabelle thead th {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border-color: #2a2a2a; /* Dunklere Borders für bessere Lesbarkeit */
  }

  body.dark-mode #spesenTabelle tbody td {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: #2a2a2a; /* Dunklere Borders für bessere Lesbarkeit */
  }

  body.dark-mode #spesenTabelle tbody tr:hover td {
    background-color: var(--dark-bg-tertiary);
  }

  /* Dark Mode Kunden-Zellen (spezielle Styling) */
  body.dark-mode .kunde-cell {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
  }

  body.dark-mode .kunde-input {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
  }

  body.dark-mode .kunde-input:focus {
    background-color: var(--dark-bg-tertiary);
    border-color: #0fd6b0;
    color: var(--dark-text-primary);
    box-shadow: 0 0 0 0.2rem rgba(15, 214, 176, 0.25);
  }

  /* Dark Mode Tabellen-Footer (Summen-Zeile) */
  body.dark-mode #spesenTabelle tfoot tr.total-row td {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border-color: #2a2a2a; /* Dunklere Borders für bessere Lesbarkeit */
    font-weight: bold;
  }

  /* Dark Mode: Alle Tabellen-Borders dunkler machen */
  body.dark-mode .table-bordered,
  body.dark-mode .table-bordered th,
  body.dark-mode .table-bordered td {
    border-color: #2a2a2a !important;
  }

  /* Dark Mode Text-Farben in Cards */
  body.dark-mode .text-muted {
    color: var(--dark-text-secondary) !important;
  }

  body.dark-mode .text-primary {
    color: #0fd6b0 !important;
  }

  body.dark-mode .text-success {
    color: #28a745 !important;
  }

  body.dark-mode .fw-bold {
    color: var(--dark-text-primary);
  }

  /* Dark Mode Überschriften und Titel */
  body.dark-mode h1,
  body.dark-mode h2,
  body.dark-mode h3,
  body.dark-mode h4,
  body.dark-mode h5,
  body.dark-mode h6 {
    color: var(--dark-text-primary);
  }

  /* Dark Mode Spesen-Titel */
  body.dark-mode .spesen-title {
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Dark Mode Modal-Titel */
  body.dark-mode .modal-title {
    color: var(--dark-text-primary);
  }

  /* Dark Mode spezifische H-Elemente */
  body.dark-mode .add-kunde-title,
  body.dark-mode .bereinigung-title,
  body.dark-mode .import-export-title {
    color: var(--dark-text-primary);
  }

  /* Dark Mode Modals */
  body.dark-mode .modal-content {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
  }

  body.dark-mode .modal-header {
    border-bottom-color: var(--dark-border);
  }

  body.dark-mode .modal-footer {
    border-top-color: var(--dark-border);
  }

  /* Dark Mode Navigation */
  body.dark-mode .navbar {
    background-color: var(--dark-bg-secondary) !important;
    border-bottom-color: var(--dark-border);
  }

  body.dark-mode .navbar-nav .nav-link {
    color: var(--dark-text-primary);
  }

  body.dark-mode .navbar-nav .nav-link:hover {
    color: #0fd6b0;
  }

  /* Dark Mode Footer */
  body.dark-mode .footer {
    background-color: var(--dark-bg-secondary) !important;
    border-top-color: var(--dark-border);
    color: var(--dark-text-primary);
  }

  /* Dark Mode Footer - überschreibt Bootstrap bg-light mit höherer Spezifität */
  body.dark-mode .footer.bg-light {
    background-color: var(--dark-bg-secondary) !important;
  }

  /* Noch spezifischere Regel für Bootstrap bg-light */
  body.dark-mode .footer.mt-5.py-3.bg-light {
    background-color: var(--dark-bg-secondary) !important;
  }

  /* Alternative: Überschreibt alle Bootstrap Background-Klassen */
  body.dark-mode .footer[class*="bg-"] {
    background-color: var(--dark-bg-secondary) !important;
  }

  body.dark-mode .footer small {
    color: var(--dark-text-secondary) !important;
  }

  body.dark-mode .footer a {
    color: #0fd6b0 !important;
  }

  body.dark-mode .footer a:hover {
    color: #0fd6b0 !important;
    text-decoration: underline !important;
  }

  body.dark-mode .footer .text-muted {
    color: var(--dark-text-secondary) !important;
  }

  /* Dark Mode Progress Bars */
  body.dark-mode .progress {
    background-color: var(--dark-bg-tertiary);
  }

  /* Dark Mode Alerts */
  body.dark-mode .alert {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
  }

  /* Dark Mode Form Labels */
  body.dark-mode .form-label {
    color: var(--dark-text-primary) !important;
  }

  /* Dark Mode Form Labels - überschreibt spezifische Farbe */
  body.dark-mode .form-label[style*="color"] {
    color: var(--dark-text-primary) !important;
  }

  body.dark-mode .form-text {
    color: var(--dark-text-secondary);
  }

  /* Dark Mode Checkboxes */
  body.dark-mode .form-check-input {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
  }

  body.dark-mode .form-check-input:checked {
    background-color: #0fd6b0;
    border-color: #0fd6b0;
  }

  /* Dark Mode Dropdowns */
  body.dark-mode .dropdown-menu {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
  }

  body.dark-mode .dropdown-item {
    color: var(--dark-text-primary);
  }

  body.dark-mode .dropdown-item:hover {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
  }

  /* =============================================================================
     MOBILE KUNDENVERWALTUNG
     =============================================================================
     
     WICHTIGE HINWEISE:
     - Diese Styles optimieren die Kundenverwaltung für mobile Geräte
     - "Done"-Button wird nur auf mobilen Geräten angezeigt
     - Flexbox-Layout für bessere Touch-Bedienung
     - Responsive Anpassungen für verschiedene Bildschirmgrößen
     
     KRITISCHE ABHÄNGIGKEITEN:
     - JavaScript: isMobileDevice() Funktion muss verfügbar sein
     - Bootstrap: Verwendet Bootstrap-Button-Klassen
     - Event-Handler: Mobile-spezifische Event-Listener erforderlich
     
     ============================================================================= */

  .kunde-input-container {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .kunde-input-container .kunde-input {
    flex: 1;
  }

  .kunde-save-btn {
    min-width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kunde-arrow-buttons {
    display: flex;
    gap: 2px;
    margin-top: 2px;
  }

  /* =============================================================================
     MOBILE-SPEZIFISCHE ANPASSUNGEN
     =============================================================================
     
     WICHTIGE HINWEISE:
     - Mobile-Optimierungen für Touch-Bedienung
     - Breakpoint: 768px für Tablet- und Mobile-Ansichten
     - "Done"-Button wird auf mobilen Geräten immer angezeigt
     - Flexbox-Anpassungen für bessere Touch-Bedienung
     
     KRITISCHE ABHÄNGIGKEITEN:
     - JavaScript: isMobileDevice() Funktion für Geräte-Erkennung
     - Bootstrap: Responsive Utility-Klassen
     - Touch-Events: Optimiert für Touch-Bedienung
     
     ============================================================================= */
  @media (max-width: 768px) {
    .kunde-save-btn {
      display: flex !important;
    }
    
    .kunde-arrow-buttons {
      justify-content: center;
    }
  }
  .spesen-card {
    max-width: 1900px;
    margin: 32px auto 32px auto;
    padding: 32px 32px 32px 32px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 16px 0 rgba(0,0,0,0.08);
    overflow-y: visible !important;
    max-height: none !important;
    /* # Erweiterung: Mobile-Zentrierung sicherstellen */
    width: 100%;
    box-sizing: border-box;
    /* # Erweiterung: Horizontalen Scroll verhindern */
    overflow-x: hidden;
  }
  .spesen-title {
    background: linear-gradient(90deg, #000000 0%, #000000 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    font-size: 2.2rem;
    padding-left: 10px;
    margin-bottom: 24px;
    letter-spacing: 1px;
  }
  .btn-gradient {
    background: linear-gradient(90deg, #091123 100%, #0fd6b0 0%);
    color: #fff;
    border: none;
    transition: box-shadow 0.2s;
  }
  .btn-gradient:hover {
    box-shadow: 0 2px 12px rgba(30, 200, 170, 0.18);
    color: #fff;
  }
  .table thead th {
    background: #e0f7fa;
    color: #009688;
    font-weight: 600;
  }
  .table-bordered > :not(caption) > * > * {
    border-color: #b2dfdb;
  }

  .total-row { 
    background-color: #f8f9fa; 
    font-weight: bold; 
    color: #009688;
  }

  .form-label {
    font-weight: 500;
    color: #009688;
  }

  /* Dark Mode Form Labels - überschreibt die ursprüngliche Definition */
  body.dark-mode .form-label {
    color: var(--dark-text-primary) !important;
  }

/* Dark Mode Form Check Labels */
body.dark-mode .form-check-label {
  color: var(--dark-text-primary) !important;
}

/* Dark Mode Placeholder Texte */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--dark-text-secondary) !important;
  opacity: 0.8;
}

/* Dark Mode Placeholder für verschiedene Browser */
body.dark-mode input::-webkit-input-placeholder,
body.dark-mode textarea::-webkit-input-placeholder {
  color: var(--dark-text-secondary) !important;
  opacity: 0.8;
}

body.dark-mode input::-moz-placeholder,
body.dark-mode textarea::-moz-placeholder {
  color: var(--dark-text-secondary) !important;
  opacity: 0.8;
}

body.dark-mode input:-ms-input-placeholder,
body.dark-mode textarea:-ms-input-placeholder {
  color: var(--dark-text-secondary) !important;
  opacity: 0.8;
}

body.dark-mode input:-moz-placeholder,
body.dark-mode textarea:-moz-placeholder {
  color: var(--dark-text-secondary) !important;
  opacity: 0.8;
}

/* OCR-Button Styling */
.ocr-anhang1 {
  transition: all 0.2s ease;
}

.ocr-anhang1:hover {
  transform: scale(1.1);
}

.ocr-anhang1:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Dark Mode Unterschriftsfeld */
body.dark-mode #signaturPadCanvas {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode #signPadCollapse .border {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

/* # Erweiterung: Mobile-optimierte Unterschriftsfeld-Styles */
.signature-container {
  width: 100%;
  max-width: 100%;
}

/* # Erweiterung: Responsive Unterschriftsfeld für mobile Geräte */
@media (max-width: 768px) {
  .signature-container {
    max-width: 100% !important;
    padding: 0.5rem;
  }
  
  #signaturPadCanvas {
    width: 100% !important;
    max-width: 100% !important;
    height: 80px !important;
    border: 2px solid #ccc !important;
    border-radius: 4px;
  }
  
  .signature-buttons {
    flex-direction: column;
    gap: 0.5rem !important;
  }
  
  .signature-buttons .btn {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    min-height: 44px; /* # Erweiterung: Mindestgröße für Touch-Bedienung */
  }
}

/* # Erweiterung: Sehr kleine Bildschirme (bis 480px) */
@media (max-width: 480px) {
  .signature-container {
    padding: 0.25rem;
  }
  
  #signaturPadCanvas {
    height: 70px !important;
  }
  
  .signature-buttons .btn {
    padding: 0.6rem;
    font-size: 0.9rem;
    min-height: 40px;
  }
}

  .anhang-cell {
    min-width: 60px;
    width: 80px;
    text-align: center;
  }
  .anhang-cell .bi-paperclip {
    font-size: 1.5em;
    color: #222;
    transition: color 0.2s;
    vertical-align: middle;
  }
  .anhang-cell .bi-paperclip.has-anhang {
    color: #28a745;
  }
  .anhang-info, .anhang-info2 {
    display: none !important;
  }

  .ukosten-cell {
    min-width: 70px;
    width: 90px;
    text-align: center;
  }
  
  /* Kompaktere Tabellen-Styles */
  .table th, .table td {
    padding: 0.5rem 0.3rem;
    font-size: 0.9rem;
    white-space: nowrap;
    width: 6.25%; /* 100% / 16 Spalten = 6.25% */
  }
  
  /* Kunde-Spalte doppelt so groß */
  .table th:nth-child(2), .table td:nth-child(2) { /* Kunde */
    width: 17%; /* Doppelt so groß wie die anderen */
  }
  
  /* Weitere Kosten-Spalte 10% größer */
  .table th:nth-child(11), .table td:nth-child(11) { /* Weitere Kosten */
    width: 8%; /* 6.25% + 10% = 6.875% */
  }
  
  .table th:nth-child(3), .table td:nth-child(3) { /* Entfernung (km) */
    width: 8%;
  }
  
  .table th {
    font-size: 0.85rem;
    padding: 0.4rem 0.2rem;
  }
  
 
  
  .table input[type="checkbox"] {
    transform: scale(0.9);
  }
  
  /* Kunde-Cell kompakter */
  .kunde-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4px;
    min-width: 100%;
    max-width: 100%;
    gap: 4px;
    /* # Erweiterung: Vertikale Zentrierung für mobile Geräte */
  }
  
  .kunde-cell .arrow-up,
  .kunde-cell .arrow-down {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    font-size: 1rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* # Erweiterung: Gleiche Größe wie Speichern-Button */
    border-radius: 4px;
  }
  .kunde-cell .arrow-up i,
  .kunde-cell .arrow-down i {
    font-size: 1rem;
  }

  .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-height: none !important;
  }

  
  /* Tabelle selbst optimieren */
  #spesenTabelle {
    width: 100%;
    min-width: 1200px; /* Minimale Breite für alle Spalten */
    max-width: 100%;
    table-layout: fixed; /* Bessere Kontrolle über Spaltenbreiten */
  }
  
  /* Webkit Scrollbar Styling */
  .table-container::-webkit-scrollbar {
    height: 8px;
  }
  
  .table-container::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
  }
  
  .table-container::-webkit-scrollbar-thumb {
    background: #009688;
    border-radius: 4px;
  }
  
  .table-container::-webkit-scrollbar-thumb:hover {
    background: #00796b;
  }
  
  /* Entferne die alte table-responsive Klasse */
  .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-height: none !important;
  }

  .settings-btn-group {
    display: none !important;
  }
  .settings-btn.help-btn {
    background: #fff;
    color: #009688;
    border: 1px solid #009688;
  }
 
  /* =============================================================================
     FOOTER STYLES
     =============================================================================
     
     WICHTIGE HINWEISE:
     - Fixed Footer: Bleibt immer am unteren Bildschirmrand sichtbar
     - Z-Index: 1000 für korrekte Überlagerung
     - Responsive: Passt sich an verschiedene Bildschirmgrößen an
     - Accessibility: Kontrastreiche Farben für bessere Lesbarkeit
     
     KRITISCHE ABHÄNGIGKEITEN:
     - Body padding-bottom: Muss der Footer-Höhe entsprechen
     - Bootstrap: Verwendet Bootstrap-Utility-Klassen
     - JavaScript: Version-Anzeige wird dynamisch aktualisiert
     
     ============================================================================= */
  
  .footer {
    margin-top: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-top: 1px solid #dee2e6;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    backdrop-filter: blur(10px);
  }

  /* Dark Mode Footer - überschreibt die ursprüngliche Footer-Definition */
  body.dark-mode .footer {
    background: var(--dark-bg-secondary) !important;
    border-top-color: var(--dark-border);
    color: var(--dark-text-primary);
  }
  
  .footer small {
    font-size: 0.875rem;
    color: #6c757d !important;
  }
  
  .footer a {
    color: #009688 !important;
    transition: color 0.2s;
  }
  
  .footer a:hover {
    color: #00796b !important;
    text-decoration: underline !important;
  }
  
  #versionFooter {
    font-weight: 500;
    color: #009688 !important;
  }
  
  /* Responsive Footer */
  @media (max-width: 768px) {
    .footer {
      padding: 0.75rem 0 !important;
    }
    
    .footer small {
      font-size: 0.75rem;
    }
    
    body {
      padding-bottom: 50px; /* Kleinere Höhe auf mobilen Geräten */
    }
  }
  
  /* =============================================================================
     CHANGELOG MODAL STYLES
     =============================================================================
     
     WICHTIGE HINWEISE:
     - Modal-Styles für die Versionshistorie-Anzeige
     - Bootstrap-Modal-Integration: Erweitert Standard-Modal-Styles
     - Responsive Design: Anpassungen für mobile Geräte
     - Accessibility: ARIA-konforme Styles für Screen Reader
     
     KRITISCHE ABHÄNGIGKEITEN:
     - Bootstrap Modal: Erfordert Bootstrap-Modal-Komponente
     - JavaScript: loadChangelog() Funktion für dynamischen Inhalt
     - HTML: Modal-Struktur muss korrekt implementiert sein
     
     ============================================================================= */
  
  .version-block {
    border-left: 4px solid #dee2e6;
    padding-left: 1rem;
    margin-bottom: 2rem;
  }
  
  .latest-version {
    border-left-color: #28a745;
    background: linear-gradient(135deg, #f8fff9 0%, #f0fff4 100%);
    padding: 1rem;
    border-radius: 8px;
    margin-left: -1rem;
  }
  
  .version-header {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 0.5rem;
  }
  
  .version-number .badge {
    font-size: 0.9rem !important;
    padding: 0.5rem 0.75rem;
  }
  
  .category-title {
    color: #495057;
    font-weight: 600;
    font-size: 1rem;
    margin-top: 1.5rem !important;
  }
  
  .category-title i {
    margin-right: 0.5rem;
  }
  
  .change-item {
    margin: 0.5rem 0;
    padding: 0.25rem 0;
    color: #6c757d;
    font-size: 0.9rem;
  }
  
  .change-item i {
    color: #009688;
    margin-right: 0.5rem;
    font-size: 0.8rem;
  }
  
  .version-content {
    margin-top: 1rem;
  }
  
  /* Modal-spezifische Styles */
  #changelogModal .modal-xl {
    max-width: 900px;
  }
  
  #changelogModal .modal-body {
    padding: 1.5rem;
  }
  
  /* Responsive Changelog */
  @media (max-width: 768px) {
    .version-block {
      padding-left: 0.5rem;
    }
    
    .latest-version {
      margin-left: -0.5rem;
      padding: 0.75rem;
    }
    
    .version-number .badge {
      font-size: 0.8rem !important;
      padding: 0.4rem 0.6rem;
    }
    
    .category-title {
      font-size: 0.9rem;
    }
    
    .change-item {
      font-size: 0.85rem;
    }
  }

  /* =============================================================================
     RESPONSIVES MENÜ
     =============================================================================
     
     WICHTIGE HINWEISE:
     - Responsive Navigation für alle Bildschirmgrößen
     - Bootstrap-Navbar-Integration: Erweitert Standard-Navbar-Styles
     - Mobile-First: Optimiert für Touch-Bedienung
     - Accessibility: ARIA-konforme Navigation für Screen Reader
     
     KRITISCHE ABHÄNGIGKEITEN:
     - Bootstrap Navbar: Erfordert Bootstrap-Navbar-Komponente
     - JavaScript: Mobile-Menu-Toggle-Funktionalität
     - HTML: Navbar-Struktur muss korrekt implementiert sein
     
     ============================================================================= */

  .navbar {
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
  }

  .navbar-brand {
    flex-shrink: 0;
  }

  .navbar-logo {
    max-height: 40px;
    width: auto;
    transition: all 0.3s ease;
  }

  .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: #009688 !important;
    transition: all 0.2s ease;
    border: none;
    background: none;
    text-decoration: none;
  }

  .navbar-nav .nav-link:hover {
    color: #00796b !important;
    background-color: rgba(0, 150, 136, 0.1);
    border-radius: 0.375rem;
  }

  .navbar-nav .nav-link i {
    font-size: 1.2rem;
  }

  .navbar-nav .nav-link .nav-text {
    font-weight: 500;
  }

  .navbar-toggler {
    border: none;
    padding: 0.25rem 0.5rem;
  }

  .navbar-toggler:focus {
    box-shadow: none;
    outline: none;
  }

  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 150, 136, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  /* Mobile Optimierungen */
  @media (max-width: 991.98px) {
    .navbar-brand {
      gap: 1rem;
    }
    
    .navbar-logo {
      max-height: 35px;
    }
    
    .navbar-nav {
      padding-top: 1rem;
      border-top: 1px solid #dee2e6;
      margin-top: 1rem;
    }
    
    .navbar-nav .nav-link {
      padding: 0.75rem 1rem;
      border-radius: 0.375rem;
      margin-bottom: 0.25rem;
    }
    
    .navbar-nav .nav-link:hover {
      background-color: rgba(0, 150, 136, 0.1);
    }
    body {
      padding-top: 80px;
    }
    .spesen-card {
      margin: 24px auto; /* # Erweiterung: Zentrierung für mittlere Bildschirme */
    }
  }

  @media (max-width: 767.98px) {
    .navbar {
      padding: 0.25rem 0.5rem;
    }
    
    .navbar-brand {
      gap: 0.5rem;
    }
    
    .navbar-logo {
      max-height: 30px;
    }
    
    .navbar-nav .nav-link .nav-text {
      font-size: 0.9rem;
    }
    body {
      padding-top: 70px;
    }
    .spesen-card {
      margin: 16px auto; /* # Erweiterung: Zentrierung für kleine Bildschirme */
    }
  }

  @media (max-width: 575.98px) {
    .navbar-logo {
      max-height: 25px;
    }
    
    .navbar-nav .nav-link {
      padding: 0.5rem 0.75rem;
    }
    
    .navbar-nav .nav-link .nav-text {
      font-size: 0.85rem;
    }
    body {
      padding-top: 62px;
    }
    .spesen-card {
      margin: 8px auto; /* # Erweiterung: Zentrierung für sehr kleine Bildschirme */
    }
  }

  /* Time Management Illustration */
  .time-management-illustration {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
  }
  
  .illustration-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(50%);
    transition: opacity 0.3s ease;
  }
  
  .time-management-illustration:hover {
    opacity: 0.2;
  }
  
  /* Responsive Anpassungen für die Illustration */
  @media (max-width: 768px) {
    .time-management-illustration {
      width: 30px;
      height: 30px;
      top: 10px;
      right: 10px;
    }
  }
  
  @media (max-width: 576px) {
    .time-management-illustration {
      width: 25px;
      height: 25px;
      top: 8px;
      right: 8px;
    }
  }

  @media (max-width: 1000px) {
    .spesen-card { 
      padding: 12px 4px; 
      margin: 16px auto; /* # Erweiterung: Mobile-Zentrierung für mittlere Bildschirme */
    }
    .spesen-title { font-size: 1.3rem; }
    .table th, .table td { font-size: 0.85rem; }
    
    /* # Erweiterung: Arrow-Buttons für mittlere Bildschirme optimieren - gleiche Größe wie Speichern-Button */
    .kunde-cell .arrow-up,
    .kunde-cell .arrow-down {
      width: 32px;
      min-width: 32px;
      max-width: 32px;
      height: 32px;
      min-height: 32px;
      font-size: 0.95rem;
    }
    
    .kunde-cell .arrow-up i,
    .kunde-cell .arrow-down i {
      font-size: 0.95rem;
    }
    
    /* # Erweiterung: Gradient-Buttons für mittlere Bildschirme optimieren */
    .d-flex.flex-wrap.gap-2.w-100 {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 6px;
    }
    
    .btn-gradient {
      flex: 1;
      min-width: calc(50% - 3px);
      padding: 10px 12px;
      font-size: 0.9rem;
      min-height: 42px;
    }
    
    .btn-outline-success,
    .btn-danger {
      flex: 1;
      min-width: calc(50% - 3px);
      padding: 10px 12px;
      font-size: 0.9rem;
      min-height: 42px;
    }
  }
  
  /* Mobile responsive: Verwende table-responsive für kleine Bildschirme */
  @media (max-width: 768px) {
    /* # Erweiterung: Globalen horizontalen Scroll auf mobilen Geräten verhindern */
    body {
      overflow-x: hidden;
    }
    
    /* # Erweiterung: Spesen-Card für mobile Geräte zentrieren */
    .spesen-card {
      margin: 8px auto;
      padding: 8px 4px;
      width: calc(100% - 16px);
      max-width: calc(100vw - 16px);
      /* # Erweiterung: Horizontalen Scroll komplett verhindern */
      overflow-x: hidden;
      box-sizing: border-box;
    }
    
    /* # Erweiterung: Kunden-Zelle für mobile Geräte optimieren */
    .kunde-cell {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      height: 40px;
    }
    
    .kunde-input-container {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    .kunde-input {
      height: 32px;
      font-size: 0.9rem;
    }
    
    .kunde-save-btn {
      height: 32px;
      min-height: 32px;
    }
    
    /* # Erweiterung: Arrow-Buttons für mobile Geräte optimieren - gleiche Größe wie Speichern-Button */
    .kunde-cell .arrow-up,
    .kunde-cell .arrow-down {
      width: 32px;
      min-width: 32px;
      max-width: 32px;
      height: 32px;
      min-height: 32px;
      font-size: 0.9rem;
      padding: 0;
      margin: 0 1px;
    }
    
    .kunde-cell .arrow-up i,
    .kunde-cell .arrow-down i {
      font-size: 0.9rem;
    }
    
    .kunde-arrow-buttons {
      gap: 4px;
      margin-top: 0;
      justify-content: center;
      display: flex;
      align-items: center;
    }
    
    /* # Erweiterung: Gradient-Buttons für mobile Geräte optimieren */
    .d-flex.flex-wrap.gap-2.w-100 {
      flex-direction: column;
      gap: 8px;
    }
    
    .btn-gradient {
      width: 100%;
      margin-bottom: 4px;
      padding: 12px 16px;
      font-size: 0.9rem;
      min-height: 44px;
    }
    
    .btn-outline-success,
    .btn-danger {
      width: 100%;
      margin-bottom: 4px;
      padding: 12px 16px;
      font-size: 0.9rem;
      min-height: 44px;
    }
    
    /* # Erweiterung: Zeile hinzufügen Button näher zur Tabelle positionieren */
    .row.mt-3 {
      margin-top: 8px !important;
    }
    
    .row.mt-3 .col-md-4 {
      order: 2;
      margin-top: 8px;
    }
    
    .row.mt-3 .col-md-8 {
      order: 1;
      margin-bottom: 8px;
    }
    
    /* # Erweiterung: Zeile hinzufügen Button als separaten Button unter der Tabelle */
    .row.mt-3 .col-md-8 .card {
      margin-bottom: 0;
    }
    
    /* # Erweiterung: Zeile hinzufügen Button hervorheben */
    .btn-outline-success {
      background-color: #28a745;
      color: white;
      border-color: #28a745;
      font-weight: 600;
    }
    
    .btn-outline-success:hover {
      background-color: #218838;
      border-color: #1e7e34;
      color: white;
    }
    
    /* # Erweiterung: Zeile hinzufügen Button als ersten Button positionieren */
    .d-flex.flex-wrap.gap-2.w-100 .btn-outline-success {
      order: -1;
    }
    
    .table-container {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch; /* Besseres Scrolling auf iOS */
    }
    
    #spesenTabelle {
      min-width: 600px; /* # Erweiterung: Noch kleinere minimale Breite für Mobile */
      table-layout: auto; /* Automatische Spaltenbreiten auf Mobile */
    }
    
    /* Auf Mobile: Alle Spalten gleich groß, Kunde etwas größer */
    .table th, .table td {
      width: auto;
      min-width: 50px; /* # Erweiterung: Kleinere Mindestbreite für mobile Geräte */
      font-size: 0.8rem;
      padding: 0.3rem 0.2rem;
    }
    
    .table th:nth-child(2), .table td:nth-child(2) { /* Kunde */
      width: auto;
      min-width: 180px; /* # Erweiterung: Kunden-Spalte kompakter für mobile Ansicht */
    }
    
    .table th:nth-child(11), .table td:nth-child(11) { /* Weitere Kosten */
      width: auto;
      min-width: 60px; /* # Erweiterung: Kleinere Mindestbreite */
    }
    
    /* # Erweiterung: Anhang-Spalte für mobile Ansicht optimieren */
    .table th:nth-child(12), .table td:nth-child(12) { /* Anhang */
      width: auto;
      min-width: 100px; /* # Erweiterung: Kompaktere Anhang-Spalte */
      text-align: center;
    }
    
    /* # Erweiterung: Größere Buttons in der Anhang-Spalte für mobile */
    .anhang-cell .btn {
      padding: 0.4rem 0.6rem; /* Größere Buttons */
      font-size: 0.9rem;
      min-width: 36px;
      min-height: 36px;
    }
    
    .anhang-cell .btn-sm {
      padding: 0.5rem 0.7rem; /* Noch größer für mobile */
      font-size: 1rem;
      min-width: 40px;
      min-height: 40px;
    }
    
    /* # Erweiterung: OCR-Button speziell für mobile optimieren */
    .anhang-cell .ocr-anhang1 {
      font-size: 1.1rem !important;
      padding: 0.6rem 0.8rem !important;
      min-width: 44px !important;
      min-height: 44px !important;
    }
    
    /* # Erweiterung: Remove-Button speziell für mobile optimieren */
    .anhang-cell .remove-anhang1 {
      font-size: 1.1rem !important;
      padding: 0.6rem 0.8rem !important;
      min-width: 44px !important;
      min-height: 44px !important;
    }
  }

  .table th:nth-child(1), .table td:nth-child(1) { /* Tag */
    width: 9%;
  }

  @media (max-width: 600px) {
    /* # Erweiterung: Globalen horizontalen Scroll auf sehr kleinen Geräten verhindern */
    body {
      overflow-x: hidden;
    }
    
    /* # Erweiterung: Spesen-Card für sehr kleine Bildschirme optimieren */
    .spesen-card {
      margin: 4px auto;
      padding: 4px 2px;
      width: calc(100% - 8px);
      max-width: calc(100vw - 8px);
      /* # Erweiterung: Horizontalen Scroll komplett verhindern */
      overflow-x: hidden;
      box-sizing: border-box;
    }
    
    /* # Erweiterung: Kunden-Zelle für sehr kleine Bildschirme optimieren */
    .kunde-cell {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      height: 36px;
      margin-top: 4px;
    }
    
    .kunde-input-container {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 2px;
    }
    
    /* # Erweiterung: Minimale Tabellenbreite für sehr kleine Bildschirme */
    #spesenTabelle {
      min-width: 500px; /* # Erweiterung: Noch kleinere Breite für sehr kleine Bildschirme */
    }
    
    /* # Erweiterung: Anhang-Spalte für sehr kleine Bildschirme */
    .table th:nth-child(12), .table td:nth-child(12) { /* Anhang */
      min-width: 90px; /* # Erweiterung: Kompaktere Anhang-Spalte für sehr kleine Bildschirme */
    }
    
    /* # Erweiterung: Noch größere Buttons für sehr kleine Bildschirme */
    .anhang-cell .ocr-anhang1,
    .anhang-cell .remove-anhang1 {
      font-size: 1.2rem !important;
      padding: 0.7rem 0.9rem !important;
      min-width: 48px !important;
      min-height: 48px !important;
    }
    
    /* # Erweiterung: Kunden-Input-Container für mobile optimieren */
    .kunde-input-container {
      gap: 2px; /* Weniger Abstand auf Mobile */
    }
    .kunde-cell .kunde-input {
      font-size: 0.8rem;
      height: 28px;
      padding: 0 4px;
      width: 100%; /* # Erweiterung: Vollbreite für bessere mobile Nutzung */
      min-width: 150px; /* # Erweiterung: Kompaktere Mindestbreite für Kunden-Eingabe */
    }
    
    /* # Erweiterung: Kunden-Spalte für sehr kleine Bildschirme optimieren */
    .table th:nth-child(2), .table td:nth-child(2) { /* Kunde */
      min-width: 150px; /* # Erweiterung: Kompaktere Kunden-Spalte für sehr kleine Bildschirme */
    }
    
    /* # Erweiterung: Weitere Kosten-Spalte für sehr kleine Bildschirme */
    .table th:nth-child(11), .table td:nth-child(11) { /* Weitere Kosten */
      min-width: 50px; /* # Erweiterung: Noch kompaktere Weitere Kosten-Spalte */
    }
    /* # Erweiterung: Arrow-Buttons für sehr kleine Bildschirme optimieren - gleiche Größe wie Speichern-Button */
    .kunde-cell .arrow-up,
    .kunde-cell .arrow-down {
      width: 32px;
      min-width: 32px;
      max-width: 32px;
      height: 32px;
      min-height: 32px;
      font-size: 0.8rem;
      padding: 0;
      margin: 0 0.5px;
    }
    
    .kunde-cell .arrow-up i,
    .kunde-cell .arrow-down i {
      font-size: 0.8rem;
    }
    
    .kunde-arrow-buttons {
      gap: 2px;
      margin-top: 0;
      justify-content: center;
      display: flex;
      align-items: center;
    }
    
    /* # Erweiterung: Gradient-Buttons für sehr kleine Bildschirme optimieren */
    .d-flex.flex-wrap.gap-2.w-100 {
      flex-direction: column;
      gap: 6px;
    }
    
    .btn-gradient {
      width: 100%;
      margin-bottom: 3px;
      padding: 10px 14px;
      font-size: 0.85rem;
      min-height: 40px;
    }
    
    .btn-outline-success,
    .btn-danger {
      width: 100%;
      margin-bottom: 3px;
      padding: 10px 14px;
      font-size: 0.85rem;
      min-height: 40px;
    }
    
    /* # Erweiterung: Zeile hinzufügen Button für sehr kleine Bildschirme optimieren */
    .row.mt-3 {
      margin-top: 4px !important;
    }
    
    .row.mt-3 .col-md-4 {
      order: 2;
      margin-top: 4px;
    }
    
    .row.mt-3 .col-md-8 {
      order: 1;
      margin-bottom: 4px;
    }
  }

  .anhang-cell.anhang-dragover {
    background: #e0f7fa !important;
    outline: 2px dashed #009688;
  }
 
  .b-LogNewText{
    color: #009688;
  }

  .b-LogFixText{
    color: darkblue;
  }

  .b-VersionText{
    color: rgb(0, 88, 139);
  }