:root {
    /* Grundfarben */
    --primary-color: #0056b3; /* Blau */
    --secondary-color: #6c757d; /* Grau */
    --accent-color: #ffc107; /* Gelb */
    --danger-color: #dc3545; /* Rot */
    --success-color: #28a745; /* Grün */
    --warning-color: #fd7e14; /* Orange */
    --info-color: #17a2b8; /* Türkis */
  
    /* Grundfarben - Varianten */
    --primary-light: #3385d6; /* Helles Blau */
    --primary-dark: #003a80; /* Dunkles Blau */
    --secondary-light: #a1a5a8; /* Helles Grau */
    --secondary-dark: #4e5154; /* Dunkles Grau */
    --accent-light: #ffda7c; /* Helles Gelb */
    --accent-dark: #cc9900; /* Dunkles Gelb */
  
    /* Transparente Farben */
    --primary-transparent: rgba(0, 86, 179, 0.5); /* Halbtransparentes Blau */
    --secondary-transparent: rgba(108, 117, 125, 0.5); /* Halbtransparentes Grau */
    --accent-transparent: rgba(255, 193, 7, 0.5); /* Halbtransparentes Gelb */
  
    /* Textfarben */
    --text-primary: #212529; /* Dunkler Text */
    --text-secondary: #6c757d; /* Sekundärer Text */
    --text-light: #f8f9fa; /* Heller Text */
    --text-danger: var(--danger-color); /* Roter Text */
  
    /* Hintergrundfarben */
    --background-light: #f8f9fa; /* Heller Hintergrund */
    --background-dark: #343a40; /* Dunkler Hintergrund */
    --background-accent: var(--accent-light); /* Akzent-Hintergrund */
  
    /* Schattierungen */
    --shadow-color: rgba(0, 0, 0, 0.2); /* Standard-Schatten */
    --shadow-hover: rgba(0, 0, 0, 0.3); /* Schatten bei Hover */
    --shadow-focus: rgba(0, 0, 0, 0.4); /* Schatten bei Fokus */
  
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    --gradient-accent: linear-gradient(135deg, var(--accent-light), var(--accent-dark));
    --gradient-danger: linear-gradient(135deg, #ff6b6b, var(--danger-color));
  }