/**
 * CSS Custom Properties (Variables)
 * Globale Variablen für Farben, Schriftgrößen, Abstände und andere Design-Token
 */

:root {
    /* ===== FARBEN ===== */
    
    /* Primärfarben */
    --color-primary: #B59A53;
    --color-primary-light: #D4B776;
    --color-primary-dark: #9A8145;
    
    /* Neutrale Farben */
    --color-text-primary: #333333;
    --color-text-secondary: #2c2c2c;
    --color-text-light: #555555;
    --color-text-muted: #A0A0A0;
    --color-text-white: #E8E8E8;
    --color-text-bright-white: #FFFFFF;
    --color-text-footer-light: #E0E0E0;
    --color-text-footer-muted: #aaaaaa;
    --color-text-placeholder: #C0C0C0;
    
    /* Hintergrundfarben */
    --color-bg-white: #FFFFFF;
    --color-bg-light: #f8f9fa;
    --color-bg-light-secondary: #f5f7fa;
    --color-bg-light-tertiary: #e9ecef;
    --color-bg-card: rgba(255, 255, 255, 0.9);
    --color-bg-form: rgba(248, 249, 250, 0.8);
    --color-bg-header: rgba(255, 255, 255, 0.95);
    --color-bg-gray-container: rgba(245, 247, 250, 0.6);
    --color-bg-content-overlay: rgba(255, 255, 255, 0.7);
    --color-bg-process-overlay: rgba(42, 42, 42, 0.85);
    
    /* Dunkle Hintergründe */
    --color-bg-dark: #2A2A2A;
    --color-bg-dark-secondary: #1E1E1E;
    --color-bg-dark-accent: #22332A;
    --color-bg-dark-accent-secondary: #1E3A2B;
    --color-bg-black: #000000;
    
    /* Transparente Hintergründe */
    --color-bg-dark-transparent: rgba(42, 42, 42, 0.8);
    --color-bg-dark-transparent-heavy: rgba(42, 42, 42, 0.95);
    
    /* Rahmen & Schatten */
    --color-border-light: rgba(181, 154, 83, 0.1);
    --color-border-primary: rgba(181, 154, 83, 0.2);
    --color-border-primary-light: rgba(181, 154, 83, 0.3);
    --color-border-primary-strong: rgba(181, 154, 83, 0.4);
    --color-border-primary-focus: rgba(181, 154, 83, 0.6);
    --color-border-white-transparent: rgba(255,255,255,0.1);
    --color-border-print: #ccc;
    
    /* Status-Farben */
    --color-success: #10B981;
    --color-success-bg: rgba(34, 197, 94, 0.15);
    --color-success-bg-secondary: rgba(21, 128, 61, 0.15);
    --color-success-border: rgba(34, 197, 94, 0.3);
    
    --color-error: #EF4444;
    --color-error-bg: rgba(239, 68, 68, 0.15);
    --color-error-bg-secondary: rgba(185, 28, 28, 0.15);
    --color-error-border: rgba(239, 68, 68, 0.3);
    
    /* Gradienten */
    --gradient-primary: linear-gradient(135deg, #B59A53 0%, #D4B776 100%);
    --gradient-primary-reverse: linear-gradient(135deg, #D4B776 0%, #B59A53 100%);
    --gradient-dark: linear-gradient(135deg, #2A2A2A 0%, #1E1E1E 40%, #22332A 85%, #1E3A2B 100%);
    --gradient-dark-footer: linear-gradient(135deg, #2A2A2A 0%, #1E1E1E 40%, #22332A 85%, #1E3A2B 100%);
    --gradient-dark-special: linear-gradient(135deg, #1E3A2B 0%, #2A2A2A 100%);
    --gradient-page-bg: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 40%, #f5f7fa 85%, #e9ecef 100%);
    --gradient-success: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(21, 128, 61, 0.15) 100%);
    --gradient-error: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(185, 28, 28, 0.15) 100%);
    
    /* ===== ABSTÄNDE - Mobile First mit clamp() ===== */
    --spacing-xs: clamp(6px, 1.5vw, 8px);
    --spacing-sm: clamp(12px, 2.5vw, 15px);
    --spacing-md: clamp(16px, 3vw, 20px);
    --spacing-lg: clamp(24px, 4vw, 30px);
    --spacing-xl: clamp(32px, 5vw, 40px);
    --spacing-xxl: clamp(48px, 7vw, 60px);
    --spacing-xxxl: clamp(64px, 9vw, 80px);
    
    /* Spezifische Abstände */
    --container-padding: clamp(16px, 3vw, 20px);
    --section-padding: clamp(60px, 8vw, 80px);
    --section-padding-large: clamp(80px, 10vw, 100px);
    --card-margin: clamp(40px, 6vw, 60px);
    --card-padding: clamp(24px, 4vw, 30px);
    --form-padding: clamp(12px, 2.5vw, 15px);
    --header-padding: clamp(6px, 0.8vw, 6px);
    
    /* Abstände zwischen Elementen */
    --gap-small: clamp(16px, 3vw, 20px);
    --gap-medium: clamp(24px, 4vw, 30px);
    --gap-large: clamp(32px, 5vw, 40px);
    
    /* ===== BREAKPOINTS ===== */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-tablet-large: 1024px;
    --breakpoint-desktop: 1200px;
    --breakpoint-desktop-large: 1400px;
    
    /* ===== SCHRIFTGROSSEN ===== */
    
    /* Überschriften - Mobile First Design */
    --font-size-h1: clamp(2.2em, 5vw, 3.2em);
    --font-size-h2: clamp(1.8em, 4vw, 2.2em);
    --font-size-h3: clamp(1.5em, 3.5vw, 1.9em);
    --font-size-h4: clamp(1.3em, 3vw, 1.5em);
    --font-size-h5: clamp(1.15em, 2.5vw, 1.2em);
    --font-size-h6: clamp(1.05em, 2vw, 1.1em);
    
    /* Spezielle Überschriften */
    --font-size-hero-h1: clamp(2.2em, 6vw, 2.6em);
    --font-size-hero-h2: clamp(1.6em, 4vw, 1.8em);
    --font-size-intro-h1: clamp(2.2em, 5.5vw, 2.6em);
    --font-size-intro-sub: clamp(1.2em, 3vw, 1.4em);
    --font-size-special-h3: clamp(1.8em, 4.5vw, 2.2em);
    --font-size-page-hero-h1: clamp(2em, 5vw, 2.4em);
    --font-size-page-hero-sub: clamp(1.15em, 3vw, 1.3em);
    --font-size-page-hero-desc: clamp(1em, 2.5vw, 1.1em);
    
    /* Fließtext - optimiert für Lesbarkeit */
    --font-size-body: clamp(1em, 2vw, 1.1em);
    --font-size-small: clamp(0.85em, 1.8vw, 0.9em);
    --font-size-hero-p: clamp(1em, 2.2vw, 1.05em);
    --font-size-special-p: clamp(1.2em, 3vw, 1.4em);
    --font-size-about-p: clamp(1em, 2.2vw, 1.05em);
    --font-size-feature-item: clamp(1em, 2.2vw, 1.05em);
    --font-size-benefit-item: clamp(1em, 2.2vw, 1.05em);
    --font-size-feature-summary: clamp(1.05em, 2.3vw, 1.1em);
    --font-size-footer-text: clamp(0.9em, 1.9vw, 0.95em);
    
    /* Interface-Elemente */
    --font-size-button: clamp(0.9em, 2vw, 1em);
    --font-size-nav: clamp(0.9em, 2vw, 1em);
    --font-size-label: clamp(0.9em, 2vw, 0.95em);
    --font-size-input: clamp(0.95em, 2vw, 1em);
    
    /* Icons - vereinheitlicht und responsive */
    --icon-size-xs: clamp(0.8em, 2vw, 1em);
    --icon-size-sm: clamp(1em, 2.5vw, 1.2em);
    --icon-size-md: clamp(1.2em, 3vw, 1.5em);
    --icon-size-lg: clamp(1.8em, 4vw, 2.2em);
    --icon-size-footer-social: clamp(1.8em, 4vw, 1.9em);
    --icon-size-xl: clamp(2.5em, 5vw, 3em);
    --icon-size-xxl: clamp(3em, 6vw, 4em);
    
    /* Legacy Icon-Größen für Kompatibilität */
    --font-size-icon: var(--icon-size-md);
    --font-size-large-icon: var(--icon-size-xxl);
    
    /* Karten & Komponenten */
    --font-size-card-title: clamp(1.5em, 3.5vw, 1.9em);
    --font-size-card-text: clamp(1em, 2vw, 1.1em);
    
    /* Kontakt-Komponenten */
    --font-size-contact-label: clamp(1em, 2.2vw, 1.05em);
    --font-size-contact-value: clamp(1.05em, 2.3vw, 1.1em);
    --font-size-contact-note: clamp(0.85em, 1.8vw, 0.9em);
    
    /* ===== SCHRIFTGEWICHTE ===== */
    --font-weight-thin: 100;
    --font-weight-extra-light: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;
    
    /* ===== BORDER-RADIUS ===== */
    --border-radius-small: 6px;
    --border-radius-medium: 12px;
    --border-radius-large: 20px;
    --border-radius-round: 50px;
    --border-radius-circle: 50%;
    
    /* ===== SPEZIFISCHE GRÖSSEN ===== */
    /* Logo & Navigation */
    --logo-max-height: clamp(32px, 2.5vw + 20px, 44px);
    --logo-footer-height: clamp(40px, 3vw + 24px, 56px);
    --hamburger-size: 30px; /* Feste Größe für konsistente Darstellung */
    --hamburger-line-height: 3px;
    --hamburger-border-radius: 3px;
    --nav-underline-height: 2px;
    --mobile-menu-position: clamp(15px, 3vw, 20px);
    
    /* Präzise Transform-Werte für perfekte X-Zentrierung */
    --hamburger-translate-distance: 5.75px;
    
    /* Footer */
    --footer-plant-height: clamp(180px, 20vw, 250px);
    --footer-column-min-width: 250px;
    
    /* Container */
    --container-max-width: 1200px;
    --container-max-width-wide: 1400px;
    --container-max-width-full: 1600px;
    --footer-container-max-width: 1400px;
    
    /* Transform-Werte für Hamburger - präzise feste Werte */
    --hamburger-transform-1: rotate(45deg) translate(5.75px, 5.75px);
    --hamburger-transform-2: rotate(-45deg) translate(5.75px, -5.75px);
    
    /* ===== SCHATTEN ===== */
    --shadow-light: 0 5px 15px rgba(0,0,0,0.08);
    --shadow-medium: 0 8px 25px rgba(0,0,0,0.1);
    --shadow-heavy: 0 10px 25px rgba(0, 0, 0, 0.3);
    --shadow-primary: 0 4px 15px rgba(181, 154, 83, 0.3);
    --shadow-primary-hover: 0 6px 20px rgba(181, 154, 83, 0.4);
    --shadow-card: 0 15px 35px rgba(0,0,0,0.4);
    --shadow-card-hover: 0 20px 40px rgba(0,0,0,0.5);
    --shadow-card-special: 0 20px 40px rgba(0,0,0,0.3);
    --shadow-dark: 0 20px 45px rgba(0, 0, 0, 0.5);
    --shadow-header: 0 4px 20px rgba(0,0,0,0.1);
    --shadow-text: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-mobile-menu: -5px 0 20px rgba(0,0,0,0.3);
    --shadow-form-focus: 0 0 0 4px rgba(181, 154, 83, 0.1);
    --shadow-checkbox: 0 0 0 2px rgba(181, 154, 83, 0.1);
    --shadow-checkbox-focus: 0 0 0 2px rgba(181, 154, 83, 0.2);
    
    /* Button Status Farben */
    --color-button-disabled-bg: rgba(181, 154, 83, 0.3);
    --color-button-disabled-text: rgba(255, 255, 255, 0.5);
    
    /* ===== ÜBERGÄNGE ===== */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ===== Z-INDEX ===== */
    --z-index-dropdown: 1000;
    --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;
    --z-index-mobile-menu: 1100;
    
    /* ===== MOBILE RESPONSIVE BREAKPOINTS ===== */
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
}