/* ========================================
   VARIABLES.CSS - Zentrale CSS-Variablen
   Alle CSS-Variablen an einem Ort
   ======================================== */

:root {
  /* ========================================
     FARBEN - Basis
     ======================================== */
  --color-primary: #00CFFF;
  --color-secondary: #041726;
  --color-accent: #5A0F14;
  --color-text-light: #E6EDF3;
  --color-text-secondary: #9FB7C8;

  /* ========================================
     FARBEN - Layout & Sections
     ======================================== */
  --section-bg: rgba(8, 20, 33, 0.78);
  --section-border: var(--color-primary-10);
  --section-shadow: 0 35px 120px rgba(0, 0, 0, 0.45);
  --text-muted: #9fb7c8;
  --text-strong: #eaf6ff;
  --accent: #00cfff;

  /* ========================================
     FARBEN - Goldene Akzente
     ======================================== */
  --gold-accent: #D4AF37;
  --gold-accent-light: #C9A961;
  --gold-accent-bright: #F4D03F;
  --gold-glow: rgba(212, 175, 55, 0.25);
  --gold-glow-strong: rgba(212, 175, 55, 0.4);
  --gold-glow-intense: rgba(244, 208, 63, 0.5);

  /* ========================================
     GLASSMORPHISM
     ======================================== */
  --glass-bg: rgba(5, 11, 22, 0.65);
  --glass-bg-light: rgba(5, 11, 22, 0.45);
  --glass-bg-heavy: rgba(5, 11, 22, 0.8);
  --glass-border: var(--color-primary-12);
  --glass-border-subtle: var(--color-primary-06);
  --glass-blur: blur(14px);

  /* ========================================
     PRIMARY COLOR VARIANTS
     ======================================== */
  --color-primary-03: rgba(0, 207, 255, 0.03);
  --color-primary-05: rgba(0, 207, 255, 0.05);
  --color-primary-06: rgba(0, 207, 255, 0.06);
  --color-primary-08: rgba(0, 207, 255, 0.08);
  --color-primary-10: rgba(0, 207, 255, 0.10);
  --color-primary-12: rgba(0, 207, 255, 0.12);
  --color-primary-15: rgba(0, 207, 255, 0.15);
  --color-primary-16: rgba(0, 207, 255, 0.16);
  --color-primary-18: rgba(0, 207, 255, 0.18);
  --color-primary-19: rgba(0, 207, 255, 0.19);
  --color-primary-20: rgba(0, 207, 255, 0.20);
  --color-primary-22: rgba(0, 207, 255, 0.22);
  --color-primary-23: rgba(0, 207, 255, 0.23);
  --color-primary-24: rgba(0, 207, 255, 0.24);
  --color-primary-25: rgba(0, 207, 255, 0.25);
  --color-primary-30: rgba(0, 207, 255, 0.30);
  --color-primary-32: rgba(0, 207, 255, 0.32);
  --color-primary-35: rgba(0, 207, 255, 0.35);
  --color-primary-40: rgba(0, 207, 255, 0.40);
  --color-primary-45: rgba(0, 207, 255, 0.45);
  --color-primary-50: rgba(0, 207, 255, 0.50);
  --color-primary-60: rgba(0, 207, 255, 0.60);
  --color-primary-63: rgba(0, 207, 255, 0.63);
  --color-primary-65: rgba(0, 207, 255, 0.65);
  --color-primary-67: rgba(0, 207, 255, 0.67);
  --color-primary-70: rgba(0, 207, 255, 0.7);
  --color-primary-73: rgba(0, 207, 255, 0.73);
  --color-primary-75: rgba(0, 207, 255, 0.75);
  --color-primary-77: rgba(0, 207, 255, 0.77);
  --color-primary-80: rgba(0, 207, 255, 0.80);
  --color-primary-83: rgba(0, 207, 255, 0.83);
  --color-primary-85: rgba(0, 207, 255, 0.85);
  --color-primary-87: rgba(0, 207, 255, 0.87);
  --color-primary-90: rgba(0, 207, 255, 0.90);
  --color-primary-100: rgba(0, 207, 255, 1);

  /* ========================================
     BACKGROUND VARIANTS
     ======================================== */
  --bg-black-10: rgba(0, 0, 0, 0.1);
  --bg-black-20: rgba(0, 0, 0, 0.2);
  --bg-black-25: rgba(0, 0, 0, 0.25);
  --bg-black-30: rgba(0, 0, 0, 0.3);
  --bg-black-35: rgba(0, 0, 0, 0.35);
  --bg-black-40: rgba(0, 0, 0, 0.4);
  --bg-black-50: rgba(0, 0, 0, 0.5);
  --bg-dark-50: rgba(5, 12, 22, 0.5);
  --bg-dark-60: rgba(5, 12, 20, 0.6);
  --bg-dark-75: rgba(5, 12, 20, 0.75);
  --bg-dark-80: rgba(5, 12, 20, 0.8);
  --bg-dark-85: rgba(5, 12, 22, 0.85);
  --bg-dark-90: rgba(5, 12, 20, 0.9);
  --bg-white-05: rgba(255, 255, 255, 0.05);
  --bg-white-08: rgba(255, 255, 255, 0.08);
  --bg-white-25: rgba(255, 255, 255, 0.25);
  --bg-special-50: rgba(6, 18, 32, 0.5);
  --bg-special-65: rgba(4, 10, 18, 0.65);
  --bg-error-25: rgba(154, 43, 43, 0.25);

  /* ========================================
     HINTERGRUND & GRADIENTEN
     ======================================== */
  --bg-gradient-top: #02040A;
  --bg-gradient-middle: #041726;
  --bg-gradient-bottom: #02040A;

  /* ========================================
     CTA BUTTONS - Azoth Gradient
     ======================================== */
  --cta-azoth-gradient: linear-gradient(135deg, #013f5f 0%, #016c9d 35%, #00aede 70%, #5ff6ff 100%);
  --cta-azoth-gradient-hover: linear-gradient(135deg, #024c74 0%, #0288bb 40%, #18d5ff 80%, #8cffff 100%);
  --cta-azoth-border: rgba(222, 191, 120, 0.55);
  --cta-azoth-border-hover: rgba(245, 210, 143, 0.75);
  --cta-azoth-shadow: 0 12px 32px rgba(0, 117, 156, 0.35), 0 0 22px rgba(255, 217, 142, 0.22);
  --cta-azoth-shadow-hover: 0 18px 40px rgba(1, 137, 190, 0.45), 0 0 28px rgba(255, 220, 150, 0.32);
  --cta-azoth-text: #F5FDFF;

  /* ========================================
     CTA SYSTEM - Vereinheitlichte Variablen
     ======================================== */
  /* Größen */
  --cta-height-primary: 52px;
  --cta-height-secondary: 48px;
  --cta-height-tertiary: 44px;
  --cta-border-radius: 999px;
  --cta-padding-x: 1.5rem;
  --cta-padding-y: 0;

  /* Transitions */
  --cta-transition-timing: cubic-bezier(0.22, 1, 0.36, 1);
  --cta-transition-duration: 0.3s;
  --cta-transition-duration-complex: 0.6s;

  /* Hover-Effekte */
  --cta-hover-transform: translateY(-2px) scale(1.02);
  --cta-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 16px var(--color-primary-15);

  /* Reduzierte Schatten (ohne übertriebene Glow-Effekte) */
  --cta-shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.2);
  --cta-shadow-hover-subtle: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 12px var(--color-primary-20);

  /* Typografie */
  --cta-font-size: 0.95rem;
  --cta-font-weight: 700;
  --cta-letter-spacing: 0.08em;

  /* ========================================
     HERO - Scroll & Animation
     ======================================== */
  --hero-scroll-progress: 0;
  --hero-bg-shift: 0px;
  --hero-man-shift: 0px;
  --hero-content-shift: 0px;
  --hero-content-opacity: 1;
  --hero-man-opacity: 1; /* Opacity des traurigen Mannes (1.0 → 0 beim Scrollen) */

  /* ========================================
     FEATURE CARDS
     ======================================== */
  --feature-accent: #00cfff;
  --feature-glow: var(--color-primary-15);
  --feature-sheen: rgba(255, 255, 255, 0.04);
  --feature-surface: rgba(5, 12, 20, 0.9);

  /* ========================================
     GÄSTEBUCH - Feature-spezifische Variablen
     ======================================== */
  --feature-gb-primary: var(--color-primary-10);
  --feature-gb-primary-hover: rgba(79, 255, 255, 0.15);
  --feature-gb-gold: rgba(212, 175, 55, 0.15);
  --feature-gb-gold-light: rgba(201, 169, 97, 0.2);
  --feature-gb-gold-bright: rgba(244, 208, 63, 0.2);
  --feature-gb-text-light: #E6EDF3;
  --feature-gb-text-secondary: #9FB7C8;
  --feature-gb-bg-dark: rgba(2, 4, 10, 0.95);
  --feature-gb-bg-glass: rgba(5, 11, 22, 0.35);
  --feature-gb-bg-glass-heavy: rgba(5, 11, 22, 0.5);
  --feature-gb-border: var(--color-primary-12);
  --feature-gb-border-subtle: var(--color-primary-06);
  --feature-gb-border-strong: var(--color-primary-30);
  --feature-gb-blur: blur(14px);
  --feature-gb-shadow: 0 35px 120px rgba(0, 0, 0, 0.45);
  --feature-gb-shadow-glow: 0 0 20px var(--color-primary-30);

  /* ========================================
     LAYOUT & SPACING
     ======================================== */
  --max-content-width: 1280px;
  --viewport-width: 1920px;
  --viewport-height: 1080px;

  /* ========================================
     GRID SYSTEM - Vereinheitlicht
     ======================================== */
  --grid-columns: 12;
  --grid-gap: var(--spacing-gap-md);
  --container-max-width: 1280px;
  --container-padding: clamp(1.25rem, 3vw, 2.5rem);

  /* ========================================
     SPACING - Basis-Werte
     ======================================== */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 2.5rem;
  --spacing-2xl: 3rem;

  /* ========================================
     SPACING - Responsive Gaps
     ======================================== */
  --spacing-gap-sm: clamp(1rem, 2vw, 1.5rem);
  --spacing-gap-md: clamp(1.5rem, 3vw, 2rem);
  --spacing-gap-lg: clamp(2rem, 4vw, 2.5rem);

  /* ========================================
     SPACING - Panel Paddings
     ======================================== */
  --panel-padding-sm: clamp(1.25rem, 2.5vw, 1.75rem);
  --panel-padding-md: clamp(1.5rem, 3vw, 2rem);
  --panel-padding-lg: clamp(2rem, 4vw, 2.5rem);

  /* ========================================
     TYPOGRAPHY - Schriftgrößen (Optimiert nach Golden Ratio)
     ======================================== */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px - Body */
  --font-size-md: 1.125rem;     /* 18px */
  --font-size-lg: 1.25rem;      /* 20px */
  --font-size-xl: 1.5rem;       /* 24px - h4 */
  --font-size-2xl: 2rem;        /* 32px - h3 */
  --font-size-3xl: 3rem;        /* 48px - h2 */
  --font-size-4xl: clamp(3rem, 6vw, 4.5rem); /* h1 */

  /* Typografie-Hierarchie - Klare Proportionen */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ========================================
     BORDER RADIUS
     ======================================== */
  --radius-xs: 2px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  /* ========================================
     FARBEN - Error & Success
     ======================================== */
  --color-error: #FF6B6B;
  --color-error-bg: rgba(220, 38, 38, 0.15);
  --color-error-border: rgba(220, 38, 38, 0.4);
  --color-error-shadow: rgba(220, 38, 38, 0.2);
  --color-success: #22c55e;

  /* ========================================
     Z-INDEX SYSTEM - Zentrale Hierarchie
     ======================================== */
  /* Base Content: 1-10 */
  --z-base: 1;
  --z-content: 10;

  /* Overlays & Effects: 100-200 */
  --z-overlay: 100;
  --z-backdrop: 150;

  /* Modals & Dialogs: 1000-1100 */
  --z-modal: 1000;
  --z-modal-backdrop: 1050;

  /* Cookie Banner & Notifications: 2000 */
  --z-cookie: 2000;
  --z-notification: 2100;

  /* Tooltips & Dropdowns: 3000 */
  --z-tooltip: 3000;
  --z-dropdown: 3100;

  /* Scroll Progress: 4000 */
  --z-scroll-progress: 4000;

  /* Sticky Elements: 5000 */
  --z-sticky: 5000;

  /* ========================================
     RESPONSIVE BREAKPOINTS - Zentrale Werte
     ======================================== */
  --breakpoint-xs: 480px;   /* Sehr kleine Mobile */
  --breakpoint-sm: 640px;   /* Mobile */
  --breakpoint-md: 768px;   /* Tablet */
  --breakpoint-lg: 1024px;  /* Tablet groß / Desktop klein */
  --breakpoint-xl: 1200px;  /* Desktop */
  --breakpoint-2xl: 1440px; /* Desktop groß */
}