/* ===========================
   VARIABLES.CSS
   ===========================
   Zweck:
   Zentrale CSS-Variablen für das gesamte Projekt.
   Alle Farben, Abstände, Breakpoints und andere
   wiederverwendbare Werte sind hier definiert.
   =========================== */

:root {

    /* ========================================
       FARBEN - PRIMARY & SECONDARY
       ======================================== */

    --color-primary: #449CDB;
    --color-primary-hover: #707070;
    --color-primary-dark: #003d66;

    --color-secondary: #cc3f35;
    --color-secondary-hover: #a33229;

    /* ========================================
       FARBEN - GRAUSTUFEN
       ======================================== */

    --color-white: #ffffff;
    --color-black: #000000;

    --color-gray-lightest: #f0f0f0;
    --color-gray-light: #e4e4e4;
    --color-gray-medium: #707070;
    --color-gray-dark: #646464;
    --color-gray-darkest: #1f1f1f;

    /* ========================================
       FARBEN - SEMANTISCH
       ======================================== */

    --color-text: #1f1f1f;
    --color-text-light: #707070;

    --color-link: #00528c;
    --color-link-hover: #707070;

    --color-error: #b00020;
    --color-success: #4caf50;
    --color-warning: #ff9800;

    --color-background: #ffffff;
    --color-background-alt: #e4e4e4;
    --color-background-dark: #00528c;

    /* ========================================
       FARBEN - KOMPONENTEN
       ======================================== */

    --color-button-bg: #449CDB;
    --color-button-text: #ffffff;
    --color-button-hover-bg: #707070;
    --color-button-hover-text: #ffffff;

    --color-border: #000000;
    --color-border-light: #e4e4e4;
    --color-border-medium: #707070;

    --color-input-border: #000000;
    --color-input-border-focus: #00528c;
    --color-input-border-error: #b00020;

    /* ========================================
       SPACING - KONSISTENTES 5PX RASTER
       ======================================== */

    --spacing-3px: 0.188rem; /* 3px */
    --spacing-5px: 0.3125rem; /* 5px */
    --spacing-10px: 0.6250rem; /* 10px */
    --spacing-12px: 0.7500rem; /* 12px */
    --spacing-15px: 0.9375rem; /* 15px */
    --spacing-16px: 1.0000rem; /* 16px */
    --spacing-18px: 1.1250rem; /* 18px */
    --spacing-20px: 1.2500rem; /* 20px */
    --spacing-25px: 1.5625rem; /* 25px */
    --spacing-30px: 1.8750rem; /* 30px */
    --spacing-35px: 2.1875rem; /* 35px */
    --spacing-40px: 2.5000rem; /* 40px */
    --spacing-45px: 2.8125rem; /* 45px */
    --spacing-50px: 3.1250rem; /* 50px */
    --spacing-55px: 3.4375rem; /* 55px */
    --spacing-60px: 3.7500rem; /* 60px */
    --spacing-65px: 4.0630rem; /* 65px */
    --spacing-70px: 4.3750rem; /* 70px */
    --spacing-75px: 4.6875rem; /* 75px */
    --spacing-80px: 5.0000rem; /* 80px */
    --spacing-85px: 5.3125rem; /* 85px */
    --spacing-90px: 5.6250rem; /* 90px */
    --spacing-95px: 5.9375rem; /* 95px */
    --spacing-100px: 6.25rem; /* 100px */


    /* ========================================
       LAYOUT - BREITEN & HÖHEN
       ======================================== */


    --max-width-content: 87.5000rem; /* 1400px - Hauptinhalt */

    --sidebar-width: 21.8750rem; /* 350px - Sidebar */

    --image-max-width-medium: 26.8750rem; /* 430px */
    --image-max-width-large: 43.7500rem; /* 700px */

    --min-height-button: 2.7500rem; /* 44px - Touch-Target */
    --min-height-input: 2.5000rem; /* 40px */

    /* ========================================
       TYPOGRAFIE
       ======================================== */

    --font-family-open-sans: 'Open Sans', sans-serif;

    --font-size-12px: 0.7500rem; /* 12px */
    --font-size-14px: 0.8750rem; /* 14px */
    --font-size-16px: 1.0000rem; /* 16px */
    --font-size-18px: 1.1250rem; /* 18px */
    --font-size-20px: 1.2500rem; /* 20px */
    --font-size-24px: 1.5000rem; /* 24px */
    --font-size-30px: 1.8750rem; /* 30px */
    --font-size-40px: 2.5000rem; /* 40px */

    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ========================================
       BORDERS & RADIUS
       ======================================== */

    --border-width-1px: 0.0625rem; /* 1px */
    --border-width-2px: 0.1250rem; /* 2px */
    --border-width-3px: 0.1875rem; /* 3px */
    --border-width-4px: 0.2500rem; /* 4px */

    --border-radius-5px: 0.3125rem; /* 5px */
    --border-radius-10px: 0.6250rem; /* 10px */
    --border-radius-15px: 0.9375rem; /* 15px */
    --border-radius-full: 50%;

    /* ========================================
       SHADOWS
       ======================================== */

    --shadow-sm: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
    --shadow-md: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.3);

    /* ========================================
       Z-INDEX SYSTEM
       ======================================== */

    --z-index-base: 1;
    --z-index-dropdown: 1031;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;

    /* ========================================
       FOCUS STATES - BARRIEREFREIHEIT
       ======================================== */

    --outline: var(--border-width-3px) solid var(--color-primary);
    --outline-offset: var(--spacing-3px);
    --outline-light: var(--border-width-3px) solid var(--color-white);

    /* Formular-spezifische Focus States */
    --form-outline: var(--border-width-3px) solid var(--color-primary);
    --form-outline-offset: 0.188rem;
    --form-border-hover: solid var(--border-width-1px) var(--color-primary);

    /* Alternative Focus mit Box-Shadow */
    --focus-shadow: 0 0 0 0.125rem var(--color-primary);

    /* ========================================
       BREAKPOINTS - RESPONSIVE
       ======================================== */

    /* Mobile First Breakpoints */
    --breakpoint-400px: 25rem; /* 400px */
    --breakpoint-640px: 40rem; /* 640px - Tablet Start */
    --breakpoint-1024px: 64rem; /* 1024px - Desktop Start */
    --breakpoint-1400px: 87.5rem; /* 1400px - Wide Desktop */
    --breakpoint-1600px: 100rem; /* 1600px - Extra Wide */

    /* Legacy Breakpoints (für schrittweise Migration) */
    --breakpoint-mobile-760px: 47.5rem; /* 760px */
    --breakpoint-tablet-1200px: 75rem; /* 1200px */

    /* ========================================
       KOMPONENTEN-SPEZIFISCHE WERTE
       ======================================== */

    /* Banner */
    --banner-size: 5rem; /* 80px */
    --banner-top-offset: 7.188rem; /* 115px */
    --banner-gap: 6.25rem; /* 100px - Abstand zwischen Bannern */

    /* Navigation */
    --nav-height-desktop: 3.125rem; /* 50px */
    --nav-height-mobile: 4.5625rem; /* 73px */

    /* Footer */
    --footer-padding: 1.875rem; /* 30px */

    /* Cards & Boxes */
    --card-padding: 1.875rem; /* 30px */
    --card-gap: 1.875rem; /* 30px */

    /* Icons */
    --icon-size-20px: 1.25rem; /* 20px */
    --icon-size-24px: 1.5rem; /* 24px */
    --icon-size-32px: 2rem; /* 32px */
    --icon-size-40px: 2.5rem; /* 40px */

    /* ========================================
       UTILITY CLASSES SUPPORT
       ======================================== */

    /* Opacity Levels */
    --opacity-disabled: 0.4;
    --opacity-medium: 0.6;
    --opacity-high: 0.8;
    --opacity-full: 1;
}

/* ========================================
   FARBKLASSEN - LEGACY SUPPORT
   ======================================== */

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

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

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

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

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

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