/**
 * VDB Elementor Global Colors
 * Kundenfarben für Elementor Global Colors
 */

/* ==========================================================================
   VDB ELEMENTOR GLOBAL COLORS
   ========================================================================== */

:root {
  /* VDB Kundenfarben – Landingpage-Design (Orange/Türkis) */
  --vdb-color-primary: #091c26;     /* Überschriften, dunkler Text (Primärfarbe) */
  --vdb-color-secondary: #79D4CC;   /* Türkis – Icons, Checkmarks */
  --vdb-color-accent: #e37403;      /* Orange – CTA, Buttons */
  --vdb-color-dark: #091c26;        /* Überschriften / Logo (Primärfarbe) */
  --vdb-color-text: #555555;        /* Fließtext */
  --vdb-color-light: #FFFFFF;       /* Weiß */
  --vdb-color-bg-alt: #F9F9F9;      /* Heller Hintergrund */
  --vdb-color-section-bg: #F9F9F9;  /* Section Background */
  --vdb-color-section-bg-2: #091c26; /* Dunkle Bereiche / Nav */
  --vdb-color-accent-hover: #E07A0E; /* Orange Hover */
  
  /* Elementor Global Colors - Überschreibung */
  --e-global-color-primary: var(--vdb-color-primary);
  --e-global-color-secondary: var(--vdb-color-secondary);
  --e-global-color-accent: var(--vdb-color-accent);
  --e-global-color-text: var(--vdb-color-text);
  --e-global-color-light: var(--vdb-color-light);
  --e-global-color-section_bg: var(--vdb-color-section-bg);
  --e-global-color-section_bg_2: var(--vdb-color-section-bg-2);
}

/* Elementor Kit spezifische Überschreibung */
.elementor-kit-6,
.elementor-kit-7,
.elementor-kit-8,
[class*="elementor-kit-"] {
  --e-global-color-primary: var(--vdb-color-primary);
  --e-global-color-secondary: var(--vdb-color-secondary);
  --e-global-color-accent: var(--vdb-color-accent);
  --e-global-color-text: var(--vdb-color-text);
  --e-global-color-light: var(--vdb-color-light);
  --e-global-color-section_bg: var(--vdb-color-section-bg);
  --e-global-color-section_bg_2: var(--vdb-color-section-bg-2);
}

/* ==========================================================================
   ELEMENTOR EDITOR COLORS
   ========================================================================== */

/* Für Elementor Editor - sicherstellen dass die Farben auch dort verfügbar sind */
.elementor-editor {
  --e-global-color-primary: var(--vdb-color-primary);
  --e-global-color-secondary: var(--vdb-color-secondary);
  --e-global-color-accent: var(--vdb-color-accent);
  --e-global-color-text: var(--vdb-color-text);
  --e-global-color-light: var(--vdb-color-light);
  --e-global-color-section_bg: var(--vdb-color-section-bg);
  --e-global-color-section_bg_2: var(--vdb-color-section-bg-2);
}

/* Elementor Panel Colors */
.elementor-panel .elementor-control-type-color .elementor-control-color-picker {
  /* Zusätzliche Farben für bessere Sichtbarkeit im Editor */
}

/* ==========================================================================
   UTILITY CLASSES FÜR VDB FARBEN
   ========================================================================== */

/* VDB Color Utility Classes */
.vdb-color-primary { color: var(--vdb-color-primary) !important; }
.vdb-color-secondary { color: var(--vdb-color-secondary) !important; }
.vdb-color-accent { color: var(--vdb-color-accent) !important; }
.vdb-color-dark { color: var(--vdb-color-dark) !important; }
.vdb-color-text { color: var(--vdb-color-text) !important; }
.vdb-color-light { color: var(--vdb-color-light) !important; }
.vdb-color-section-bg { color: var(--vdb-color-section-bg) !important; }
.vdb-color-section-bg-2 { color: var(--vdb-color-section-bg-2) !important; }

.vdb-bg-primary { background-color: var(--vdb-color-primary) !important; }
.vdb-bg-secondary { background-color: var(--vdb-color-secondary) !important; }
.vdb-bg-accent { background-color: var(--vdb-color-accent) !important; }
.vdb-bg-dark { background-color: var(--vdb-color-dark) !important; }
.vdb-bg-light { background-color: var(--vdb-color-light) !important; }
.vdb-bg-section-bg { background-color: var(--vdb-color-section-bg) !important; }
.vdb-bg-section-bg-2 { background-color: var(--vdb-color-section-bg-2) !important; }

/* ==========================================================================
   ELEMENTOR WIDGET SPECIFIC OVERRIDES
   ========================================================================== */

/* Button Widget - VDB Farben */
.elementor-widget-button .elementor-button {
  /* Standard Button mit VDB Akzentfarbe */
  background-color: var(--vdb-color-accent);
  color: var(--vdb-color-light);
  border-color: var(--vdb-color-accent);
}

.elementor-widget-button .elementor-button:hover {
  background-color: var(--vdb-color-accent-hover, #E07A0E);
  border-color: var(--vdb-color-accent-hover, #E07A0E);
}

/* Sekundärer Button – Hintergrund in Sekundärfarbe, Text/Border in Primärfarbe */
.elementor-widget-button .elementor-button.elementor-button--secondary {
  background-color: #f4f3f3;
  color: #091c26;
  border-color: #f4f3f3;
}

.elementor-widget-button .elementor-button.elementor-button--secondary:hover {
  background-color: #e4e2e2;
  color: #091c26;
  border-color: #e4e2e2;
}

/* Heading Widget - dunkles Blau/Grau */
.elementor-widget-heading .elementor-heading-title {
  color: var(--vdb-color-dark);
}

/* Text Editor Widget - Fließtext */
.elementor-widget-text-editor {
  color: var(--vdb-color-text);
}

/* Icon Widget - Türkis als sekundärer Akzent */
.elementor-widget-icon .elementor-icon {
  color: var(--vdb-color-secondary);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

/* Mobile Anpassungen */
@media (max-width: 768px) {
  :root {
    /* Mobile-spezifische Farbanpassungen falls nötig */
  }
}

/* ==========================================================================
   ELEMENTOR TEMPLATE COMPATIBILITY
   ========================================================================== */

/* Für importierte Templates - sicherstellen dass VDB Farben verwendet werden */
.elementor-template-vdb-header .elementor-widget-button .elementor-button {
  background-color: var(--vdb-color-accent);
  color: var(--vdb-color-light);
}

.elementor-template-vdb-header .elementor-widget-heading .elementor-heading-title {
  color: var(--vdb-color-light);
}

.elementor-template-vdb-header .elementor-widget-text-editor {
  color: var(--vdb-color-light);
}