/* ==========================================================================
   VARIABLES.CSS
   ==========================================================================
   Enthält alle globalen CSS-Variablen für Farben, Typografie, Abstände und Breakpoints.
*/

/* ==========================================================================
   INHALTSVERZEICHNIS
   ==========================================================================

   1. Farben...................................................Zeile 30
      1.1 Primäre und Sekundäre Farben.........................Zeile 35
      1.2 Text und Hintergrund.................................Zeile 45
      1.3 Graustufen..........................................Zeile 55

   2. Typografie..............................................Zeile 70
      2.1 Schriftfamilien.....................................Zeile 75
      2.2 Schriftgrößen.......................................Zeile 85
      2.3 Zeilenhöhen.........................................Zeile 100

   3. Abstände und Größen.....................................Zeile 110
      3.1 Basis-Abstände......................................Zeile 115
      3.2 Container-Größen....................................Zeile 130
      3.3 Border-Radius.......................................Zeile 140

   4. Effekte und Animationen.................................Zeile 150
      4.1 Schatten............................................Zeile 155
      4.2 Übergänge...........................................Zeile 165

   5. Breakpoints.............................................Zeile 175
      5.1 Responsive Breakpoints..............................Zeile 180

   6. Z-Indizes...............................................Zeile 190
*/

/* ==========================================================================
   1. Farben
   ========================================================================== */

/* 1.1 Primäre und Sekundäre Farben
   ========================================================================== */
:root {
    /* Primäre und Sekundäre Farben */
    --primary-color: #1a365d; /* Dunkelblau */
    --primary-color-dark: #132a4a; /* Dunkleres Dunkelblau */
    --secondary-color: #c5a47e;
    --secondary-color-dark: #b08f6a;
    --secondary-color-bright: #7d7d7d;

    --accent-color: #b08f6a; /* Goldton */
    /* Text und Hintergrund */
    --text-color: #333333; /* Dunkelgrau für Text */
    --text-light: #666666;
    --background-color: #ffffff;
    --background-light: #f8f9fa; /* Sehr helles Grau für Hintergründe */
    --border-color: #dddddd; /* Hellgrau für Ränder */
    --white: #ffffff;
    --black: #000000;
    /* Graustufen */
    --gray-100: #F8F9FA;
    --gray-200: #E9ECEF;
    --gray-300: #DEE2E6;
    --gray-400: #CED4DA;
    --gray-500: #ADB5BD;
    --gray-600: #6C757D;
    --gray-700: #495057;
    --gray-800: #343A40;
    --gray-900: #212529;
    /* ==========================================================================
       2. Typografie
       ========================================================================== */
    /* 2.1 Schriftfamilien */
    --font-primary: 'Lato', sans-serif; /* Hauptschriftart für Text */
    --font-secondary: 'Playfair Display', serif; /* Für Überschriften */
    --font-serif: 'Playfair Display', serif;
    --font-family-sans-serif: 'Roboto', sans-serif; /* Alternative Sans-Serif */
    --font-family-serif: 'Playfair Display', serif; /* Alternative Serif */
    --font-family-monospace: 'Courier New', Courier, monospace;
    /* 2.2 Schriftgrößen */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    
    /* 2.3 Flüssige Schriftgrößen (responsive für alle Bildschirmgrößen) */
    --font-size-h1-fluid: clamp(1.4rem, 1vw + 1rem, 4rem); /* 22px - 64px, flachere Kurve */
    --font-size-h2-fluid: clamp(1.4rem, 1vw + 1rem, 4rem); /* 22px - 64px, flachere Kurve */
    --font-size-h3-fluid: clamp(1.2rem, 0.8vw + 0.8rem, 3.2rem); /* 19px - 51px, reduziert */
    --font-size-h4-fluid: clamp(1rem, 0.7vw + 0.7rem, 2.5rem); /* 16px - 40px, reduziert */
    --font-size-text-fluid: clamp(0.9rem, 0.4vw + 0.7rem, 1.6rem); /* 14px - 26px, flachere Kurve */
    --font-size-small-fluid: clamp(0.8rem, 0.3vw + 0.6rem, 1.3rem); /* 13px - 21px, reduziert */
    
    /* Hero/Display Schriftgrößen für große Bereiche */
    --font-size-hero-fluid: clamp(2rem, 3vw + 1.5rem, 6rem); /* 32px - 96px, vw und Maximum erhöht */
    --font-size-display-fluid: clamp(1.6rem, 2.5vw + 1rem, 5.2rem); /* 26px - 83px, vw und Maximum erhöht */
    /* 2.3 Zeilenhöhen */
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-loose: 1.75;
    /* ==========================================================================
       3. Abstände und Größen
       ========================================================================== */
    /* 3.1 Basis-Abstände */
    --space-1: 0.25rem; /* 4px */
    --space-2: 0.5rem; /* 8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-5: 1.5rem; /* 24px */
    --space-6: 2rem; /* 32px */
    --space-8: 3rem; /* 48px */
    --space-10: 4rem; /* 64px */
    /* Für Kompatibilität mit bestehendem Code */
    --spacing-xs: 0.5rem; /* entspricht space-2 */
    --spacing-sm: 1rem; /* entspricht space-4 */
    --spacing-md: 1.5rem; /* entspricht space-5 */
    --spacing-lg: 2rem; /* entspricht space-6 */
    --spacing-xl: 2.5rem; /* zwischen space-6 und space-8 */
    --spacing-unit: 1rem; /* entspricht space-4 */
    /* 3.2 Container-Größen */
    --container-max: 1200px;
    --container-max-width: 1200px; /* Alias für container-max */
    --container-padding: 2rem;
    /* 3.3 Border-Radius */
    --radius-sm: 0.125rem;
    --radius-base: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    /* ==========================================================================
       4. Effekte und Animationen
       ========================================================================== */
    /* 4.1 Schatten */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    /* 4.2 Übergänge */
    --transition: all 0.3s ease;
    --transition-base: all 0.3s ease; /* Alias für transition */
    --transition-slow: all 0.5s ease;
    --transition-fast: all 0.15s ease;
    /* ==========================================================================
       5. Breakpoints
       ========================================================================== */
    /* 5.1 Responsive Breakpoints */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    /* Für Kompatibilität mit bestehendem Code */
    --breakpoint-sm: 576px; /* Alias für bp-sm */
    --breakpoint-md: 768px; /* Alias für bp-md */
    --breakpoint-lg: 992px; /* Alias für bp-lg */
    --breakpoint-xl: 1200px; /* Alias für bp-xl */
    /* ==========================================================================
       6. Z-Indizes
       ========================================================================== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-modal: 2000; /* Höherer Wert aus components.css */
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-nav: 1100; /* Für Hauptnavigation/Header */
    --z-hamburger: 1200; /* Für Hamburger-Menü-Button */
    --z-overlay: 1300; /* Für Overlays über dem Inhalt */
}