/* Bootstrap Overrides - wholenesswork.at Template v1 */
/* KONSEQUENTES #333399 THEME - WHOLENESS BRAND */

:root {
  /* Haupt-Farbpalette um #333399 */
  --wholeness-primary: #333399;
  --wholeness-primary-light: #4444BB;
  --wholeness-primary-dark: #222288;
  
  /* Sekundärfarben */
  --wholeness-secondary: #7B68EE;    /* Lavendel - passt gut zu Wholeness */
  --wholeness-accent: #FFB347;       /* Warmes Orange als Akzent */
  
  /* Grautöne */
  --wholeness-gray-900: #111827;
  --wholeness-gray-700: #374151;
  --wholeness-gray-500: #6B7280;
  --wholeness-gray-300: #D1D5DB;
  --wholeness-gray-100: #F3F4F6;
  
  /* Bootstrap Overrides */
  --bs-primary: var(--wholeness-primary);
  --bs-primary-rgb: 51, 51, 153;
  --bs-secondary: var(--wholeness-secondary);
  --bs-success: #10B981;
  --bs-danger: #EF4444;
  --bs-info: #3B82F6;
  --bs-warning: #F59E0B;
  --bs-light: #F8FAFC;
  --bs-dark: #1F2937;
  
  /* Body */
  --bs-body-color: #111827;
  --bs-body-bg: #FFFFFF;
  
  /* Links */
  --bs-link-color: var(--wholeness-primary);
  --bs-link-hover-color: var(--wholeness-primary-dark);
  
  /* Focus-Ring für Barrierefreiheit */
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .25);
  
  /* Typografie - System-Fonts für Performance */
  --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
                         'Helvetica Neue', Arial, sans-serif;
  
  /* Border Radius */
  --bs-border-radius: 0.5rem;
  --bs-border-radius-lg: 0.75rem;
}

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

/* Bootstrap text-center Fix */
.text-center {
  max-width: none !important;
  text-align: center !important;
}

/* Lead text in text-center containers */
.text-center .lead {
  max-width: none !important;
}

/* === BUTTON STYLES === */

.btn-primary {
  background-color: var(--wholeness-primary);
  border-color: var(--wholeness-primary);
}

.btn-primary:hover {
  background-color: var(--wholeness-primary-dark);
  border-color: var(--wholeness-primary-dark);
}

.btn-outline-primary {
  color: var(--wholeness-primary);
  border-color: var(--wholeness-primary);
}

.btn-outline-primary:hover {
  background-color: var(--wholeness-primary);
  border-color: var(--wholeness-primary);
}

.btn-accent {
  background-color: var(--wholeness-accent);
  border-color: var(--wholeness-accent);
  color: #000;
}

.btn-accent:hover {
  background-color: #FF9E1F;
  border-color: #FF9E1F;
  color: #000;
}

/* === NAVBAR STYLES === */

.navbar {
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

.navbar-brand {
  font-weight: 700;
  color: var(--wholeness-primary) !important;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--wholeness-gray-700);
  font-weight: 500;
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--wholeness-primary);
}

.navbar-light .navbar-nav .nav-link.active {
  color: var(--wholeness-primary);
}

/* === HERO SECTION === */

.hero-section {
  background: linear-gradient(135deg, var(--wholeness-primary) 0%, var(--wholeness-primary-dark) 100%);
  color: white;
  padding: 100px 0 80px;
}

.hero-section h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.hero-section .lead {
  font-size: 1.25rem;
  opacity: 0.95;
}

@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 2rem;
  }
  
  .hero-section {
    padding: 60px 0 40px;
  }
}

/* === CARD STYLES === */

.card {
  border: 1px solid var(--wholeness-gray-300);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(51,51,153,.15);
}

/* === FOOTER === */

footer {
  background-color: #ffffff;
  color: var(--wholeness-gray-700);
  padding: 40px 0 20px;
  margin-top: 80px;
  border-top: 1px solid var(--wholeness-gray-300);
}

footer h5 {
  color: var(--wholeness-primary);
  font-weight: 600;
}

footer a {
  color: var(--wholeness-gray-700);
  text-decoration: none;
}

footer a:hover {
  color: var(--wholeness-primary);
}

/* === SECTION SPACING === */

section {
  padding: 60px 0;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--wholeness-primary);
  margin-bottom: 3rem;
  text-align: center;
}

/* === BADGE STYLES === */

.badge {
  padding: 0.375rem 0.75rem;
  font-weight: 500;
}

/* === RESPONSIVE HELPERS === */

@media (max-width: 576px) {
  .display-5 {
    font-size: 2rem;
  }
  
  .display-6 {
    font-size: 1.5rem;
  }
}