/* Bootstrap Overrides - potenzial.at Template v2 */
/* KONSEQUENTES #333399 THEME */

:root {
  /* Haupt-Farbpalette um #333399 */
  --bs-primary: #333399;
  --bs-primary-rgb: 51, 51, 153;  /* Für BS 5.3 RGB-Varianten */
  --bs-secondary: #6B7280;
  --bs-secondary-color: #6c757d;  /* NEU: Einheitliches Grau für text-muted */
  --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 - abgestimmt auf #333399 */
  --bs-link-color: #333399;
  --bs-link-hover-color: #262673;  /* Dunklere Variante für Hover */
  
  /* Focus-Ring für Barrierefreiheit */
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .25);
  
  /* Typografie - OHNE Web-Fonts, nur System-Fonts */
  --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;
  
  /* Theme-spezifische Custom Properties */
  --potenzial-accent: #A21CAF;     /* Magenta-Accent - AA-sicher (>6:1) */
  --potenzial-gradient-start: #333399;
  --potenzial-gradient-end: #1F1F66;  /* Dunklere Blau-Variante für Gradienten */
}

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

/* KRITISCHER FIX: Bootstrap's text-center wird manchmal von max-width überschrieben */
.text-center {
  max-width: none !important;
  text-align: center !important;
}

/* FIX für lead Klasse in text-center Containern */
.text-center .lead,
.text-center p,
.text-center h1,
.text-center h2,
.text-center h3,
.text-center h4,
.text-center h5,
.text-center h6 {
  max-width: none !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Bootstrap's lead Klasse kann auch Probleme machen */
.lead {
  max-width: none !important;
}

/* Accent-Button (Magenta CTA) - AA-konform */
.btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--potenzial-accent);
  --bs-btn-border-color: var(--potenzial-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #86198F;  /* Dunklere Magenta-Variante */
  --bs-btn-hover-border-color: #86198F;
  --bs-btn-focus-shadow-rgb: 162, 28, 175;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #701A75;  /* Noch dunklere Active-Variante */
  --bs-btn-active-border-color: #701A75;
}

/* Schatten-Utilities */
.shadow-soft { 
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Navbar-Anpassungen */
.navbar {
  --bs-navbar-padding-y: 1rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.navbar-brand img {
  height: 40px;
  width: auto;
}

/* Card-Hover-Effekt */
.card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Section-Spacing */
.section-padding {
  padding: 5rem 0;
}

.section-padding-sm {
  padding: 3rem 0;
}

/* Gradient-Utility (falls gewünscht) */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--potenzial-gradient-start) 0%, var(--potenzial-gradient-end) 100%);
}

/* Accent-Background Utility */
.bg-accent {
  background-color: var(--potenzial-accent) !important;
}

/* === Typography Harmonization (Bootstrap-friendly) === */

/* 1. KPI-Zahlen: Einheitliche Größe ohne neue Stufe */
.kpi-number {
  font-size: 2.5rem;    /* zwischen h2 und display */
  font-weight: 700;
  line-height: 1;
  color: var(--bs-primary);
}
.kpi-label {
  font-size: 0.875rem;  /* etwas kleiner als small */
  opacity: 0.85;
}

/* 2. Hero-Headline: Responsive ohne zu klein zu werden */
@media (max-width: 768px) {
  .display-5 {
    font-size: calc(1.425rem + 2.1vw);  /* Bootstraps Formel anpassen */
    min-font-size: 2rem;  /* nicht unter 32px */
  }
}

/* 3. Cards & Accordion: Gleiche visuelle Gewichtung */
.card h3,
.card .h4,
.accordion-button {
  font-size: 1.25rem;   /* 20px - einheitlich */
  font-weight: 600;
}

/* 4. Lead-Text: Breite begrenzen für bessere Lesbarkeit */
.lead {
  max-width: 65ch;      /* ca. 65 Zeichen pro Zeile */
  line-height: 1.6;
}

/* 5. Display-Klassen: Kleinere, nicht-fette Preise */
.display-6 {
  font-size: 1.75rem !important;    /* Kleiner: 28px statt 40px */
  font-weight: 400 !important;      /* Normal statt fett */
}

/* === End Typography Harmonization === */

/* ========================================= */
/* MINIMAL-INVASIVE VERBESSERUNGEN (boot6) */
/* Basierend auf Grafiker-Feedback 2025    */
/* ========================================= */

/* 1. GRAU-HARMONIE - Einheitliches Sekundär-Grau */
.text-muted {
  color: var(--bs-secondary-color) !important;
  opacity: 1 !important;
}

/* 2. LOGO-FIX - Opacity entfernen für professionelleren Look */
.customer-logos img {
  opacity: 1 !important;  /* Override inline-style */
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.customer-logos img:hover {
  filter: grayscale(0%);
}

/* 3. SECTION-RHYTHMUS - Einheitlicher vertikaler Takt */
section:not(.bg-primary) {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
/* .py-4 Override entfernt - Bootstrap funktioniert wieder normal */

/* 4. TYPO-HIERARCHIE - Klarere Abstufung */
h2, .h2 {
  font-size: 2rem;
  line-height: 1.3;
  margin-bottom: 1.5rem;
}
h3, .h3, h4, .h4 {
  line-height: 1.4;
  margin-bottom: 1rem;
}
.lead {
  line-height: 1.7;
}
/* Optimale Lesebreite nur für Fließtext, nicht für zentrierte Bereiche */
section:not(.bg-primary) p:not(.text-center) {
  line-height: 1.6;
  max-width: 70ch; /* Optimale Lesebreite für bessere UX */
}

/* Zentrierte Bereiche: Volle Breite erlauben */
.bg-primary p,
.text-center {
  line-height: 1.6;
  max-width: none !important;
}

/* 5. ICON-SYSTEM - Konsistente Größen */
.icon-sm { font-size: 1.5rem !important; }
.icon-md { font-size: 2rem !important; }
.icon-lg { font-size: 3rem !important; }

/* Process Icons vereinheitlichen */
.process-icon {
  font-size: 3rem !important;
  color: var(--bs-primary);
}

/* 6. CARD-KONSISTENZ - Einheitlicher Look */
.card {
  border: 1px solid rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.card-body {
  padding: 1.5rem;
}

/* 7. BUTTON-HOVER - Besseres Feedback */
.btn {
  transition: all 0.2s ease;
}
.btn:hover {
  transform: translateY(-1px);
}

/* Ende Minimal-Invasive Verbesserungen */

/* ========================================= */
/* BLOCKQUOTE FIX - Große Anführungszeichen entfernen */
/* ========================================= */

/* Bootstrap fügt standardmäßig große Anführungszeichen zu blockquotes hinzu.
   Diese Regel entfernt sie für saubere Testimonials */
.blockquote::before,
.blockquote::after,
blockquote::before,
blockquote::after {
  content: none !important;
}

/* Entfernt auch mögliche Unicode-Anführungszeichen */
.blockquote p::before,
.blockquote p::after,
blockquote p::before,
blockquote p::after {
  content: none !important;
}

/* Versteckt auch die Bootstrap Quote-Icons in Testimonials */
.bi-quote {
  display: none !important;
}