:root {
  --sidebar-width: 280px;
  --sidebar-width-collapsed: 88px;
  --header-height: 65px;
  
  --bg-body: #F8F9FA;
  --bg-input: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-header: #333333;
  --bg-table-container: #ffffff;
  --bg-week-label: #E9ECEF;
  --bg-month-button: #f2f2f2;
  --bg-month-button-hover: #e6e6e6;
  --bg-month-button-active: #ffeeaa;
  --bg-today-button: #4285F4;
  --bg-today-button-hover: #357ae8;
  --bg-modal: #ffffff;
  --bg-modal-header: #e8f0fe; /* KORREKTUR: Farbigerer, hellblauer Header */
  --bg-freigegeben: #d4edda;
  --bg-not-freigegeben: #fff3cd;
  --bg-current-day: #cce5ff;
  --bg-highlight: #fffac0;
  --bg-switch-slider: #ccc;
  --bg-switch-slider-checked: #66bb6a;
  --bg-toast-success: #4CAF50;
  --bg-toast-error: #f44336;
  --bg-toast-info: #2196F3;
  
  --text-primary: #212529;
  --text-secondary: #555;
  --text-tertiary: #888;
  --text-link: #0069d9;
  --text-themenwoche: #007bff;
  --text-highlight-event: #d9534f;
  --text-white: #ffffff;
  --text-freigegeben: #155724;
  --text-not-freigegeben: #856404;
  
  --border-color-light: #f1f1f1;
  --border-color-medium: #dee2e6;
  --border-color-dark: #ccc;
  --border-hover: #4285F4;
  
  --shadow-color: rgba(0,0,0,0.1);
  --shadow-hover-color: rgba(66, 133, 244, 0.5);
  --modal-backdrop: rgba(0,0,0,0.5);
  
  --icon-color: #555;
  --icon-color-hover: #007bff;
  
  --scrollbar-track-color: #f1f1f1;
  --scrollbar-thumb-color: #888;
  --scrollbar-thumb-hover-color: #555;

  --primary-color: #4285F4;
  --primary-color-light: #e8f0fe;
  --ok-color: #28a745;
}

body.dark-mode {
  --bg-body: #121212;
  --bg-input: #252728;
  --bg-sidebar: #1E1E1E;
  --bg-header: #1E1E1E;
  --bg-table-container: #1E1E1E;
  --bg-week-label: #293E55;
  --bg-month-button: #3a3a3a;
  --bg-month-button-hover: #4a4a4a;
  --bg-month-button-active: #5c5324;
  --bg-today-button: #3A506B;
  --bg-today-button-hover: #4F6A8A;
  --bg-modal: #2c2c2c;
  --bg-modal-header: #293E55; /* KORREKTUR: Farbigerer, dunkelblauer Header */
  --bg-freigegeben: #2a4c2c;
  --bg-not-freigegeben: #5c4a1d;
  --bg-current-day: #334a66;
  --bg-highlight: #4d4d33;
  --bg-switch-slider: #555;
  --bg-switch-slider-checked: #3d8c40;

  --text-primary: #e0e0e0;
  --text-secondary: #bbbbbb;
  --text-tertiary: #888888;
  --text-link: #82aef9;
  --text-themenwoche: #82aef9;
  --text-highlight-event: #ff8a80;
  --text-white: #ffffff;
  --text-freigegeben: #a5d6a7;
  --text-not-freigegeben: #ffe082;
  
  --border-color-light: #333;
  --border-color-medium: #444;
  --border-color-dark: #666;
  --border-hover: #5E97F6;
  
  --shadow-color: rgba(0,0,0,0.5);
  --shadow-hover-color: rgba(94, 151, 246, 0.5);
  --modal-backdrop: rgba(0,0,0,0.7);
  
  --icon-color: #bbbbbb;
  --icon-color-hover: #82aef9;
  
  --scrollbar-track-color: #2c2c2c;
  --scrollbar-thumb-color: #6b6b6b;
  --scrollbar-thumb-hover-color: #a0a0a0;
  
  --primary-color: #82aef9;
  --primary-color-light: #293E55;
  --ok-color: #a5d6a7;
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    background-color: var(--bg-body);
    color: var(--text-primary);
}