/* ===== CSS Custom Properties (Variablen) ===== */
:root {
    /* Typography */
    --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 900;
    
    /* Brand Colors - Konsolidiert */
    --color-primary: #d32f2f;
    --color-primary-dark: #b71c1c;
    --color-primary-light: #ff5c52;
    --color-red-100: #ff7c72;
    --color-red-200: #E0382D;
    --color-red-300: #C23C33;
    --color-red-400: #a70b00;
    --color-red-500: #84332E;
    
    /* Orange */
    --color-orange-200: rgb(255, 187, 0);
    --color-orange-300: rgb(255, 145, 0);
    --color-orange-400: rgb(214, 121, 0);
    
    /* Other Colors */
    --color-blue-400: rgb(47, 0, 255);
    --color-green-400: rgb(0, 119, 26);
    
    /* Grays - Verbessert für bessere Kontraste */
    --color-gray-100: #f0f0f0;
    --color-gray-200: #d9d9d9;
    --color-gray-300: #9d9d9d;
    --color-gray-400: #5a5a5a;
    --color-gray-500: #444444;
    --color-gray-600: #333333;
    
    /* Text Colors */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #555555;
    --color-text-tertiary: #777777;
    --color-text-light: #999999;
    
    /* Special */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-light-gray: #f0f0f0;
    
    /* Categories */
    --color-aktive: rgb(255, 91, 91);
    --color-atemschutz: rgb(255, 255, 0);
    --color-jugend: orange;
    --color-verein: rgb(116, 218, 255);
    
    /* Card Styles */
    --card-bg-dark-start: #343a40;
    --card-bg-dark-end: #2b2f32;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.35);
    --shadow-button: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.bg-red-100 {
    background-color: var(--color-red-100);
}

.bg-red-200 {
    background-color: var(--color-red-200);
}

.bg-red-300 {
    background-color: var(--color-red-300);
}

.bg-red-400 {
    background-color: var(--color-red-400);
}

.bg-red-500 {
    background-color: var(--color-red-500);
}

.bg-orange-200 {
    background-color: var(--color-orange-200);
}

.bg-orange-300 {
    background-color: var(--color-orange-300);
}

.bg-orange-400 {
    background-color: var(--color-orange-400);
}

.bg-blue-400 {
    background-color: var(--color-blue-400);
}

.bg-green-400 {
    background-color: var(--color-green-400);
}

.bg-gray-200{
    background-color: var(--color-gray-200);
}

.bg-gray-300{
    background-color: var(--color-gray-300);
}

.bg-gray-400{
    background-color: var(--color-gray-400);
}

.bg-black{
    background-color: var(--color-black);
}

.aktive {
    background-color: var(--color-aktive);
}

.atemschutz {
    background-color: var(--color-atemschutz);
}

.jugend {
    background-color: var(--color-jugend);
}

.verein {
    background-color: var(--color-verein);
}

/*
============================================
                Farben Text                
============================================
*/

.text-white {
    color: var(--color-white);
}

.text-light-gray {
    color: var(--color-light-gray);
}

.text-red-100 {
    color: var(--color-red-100);
}

.text-red-200 {
    color: var(--color-red-200);
}

.text-red-300 {
    color: var(--color-red-300);
}

.text-red-400 {
    color: var(--color-red-400);
}

.text-red-500 {
    color: var(--color-red-500);
}

.text-orange-200 {
    color: var(--color-orange-200);
}

.text-orange-300 {
    color: var(--color-orange-300);
}

.text-orange-400 {
    color: var(--color-orange-400);
}

.text-gray-200{
    color: var(--color-gray-500);
}

.text-gray-300{
    color: var(--color-gray-600);
}

/* Umrandung */

.text-border-black {
    text-shadow:
        -1px -1px 0 rgb(148, 148, 148),
        1px -1px 0 rgb(148, 148, 148),
        -1px 1px 0 rgb(148, 148, 148),
        1px 1px 0 rgb(148, 148, 148);

}