/* 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;
}

/* Button Primary - exakt wie Hero-Hintergrund */
.btn-primary {
  background-color: #333399 !important;
  border-color: #333399 !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #262673 !important;
  border-color: #262673 !important;
  color: #ffffff !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;
}

/* Language Switcher Styling */
.btn-link.text-muted {
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    border-right: 1px solid rgba(0,0,0,0.1);
    padding-right: 15px;
    margin-right: 15px;
}

.btn-link.text-muted:hover {
    opacity: 1;
    color: #333399 !important;
}

.btn-link.text-muted img {
    vertical-align: middle;
}

/* === RESSOURCEN-BILDER STYLES === */
/* Für Pillar-Seiten: Metaprogramme, Gravesmodell, etc. */

/* Feature Images - Große Bilder mit Figcaption */
.feature-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    display: block;
}

.feature-image-caption {
    text-align: center;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    margin-top: 0.75rem;
    font-style: italic;
    line-height: 1.5;
}

/* Metaprogramm Card Images */
.metaprogramm-icon {
    max-height: 220px;
    object-fit: contain;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    transition: transform 0.3s ease;
}

.card:hover .metaprogramm-icon {
    transform: scale(1.05);
}

/* Graves-Level Badges (Farb-Indikatoren) */
.level-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0.25rem;
    color: #fff;
}

.level-badge.bg-beige { background-color: #F5F5DC; color: #333; }
.level-badge.bg-purple { background-color: #9333EA; }
.level-badge.bg-red { background-color: #DC2626; }
.level-badge.bg-blue { background-color: #2563EB; }
.level-badge.bg-orange { background-color: #EA580C; }
.level-badge.bg-green { background-color: #16A34A; }
.level-badge.bg-yellow { background-color: #EAB308; color: #333; }
.level-badge.bg-turquoise { background-color: #14B8A6; }

/* Inline Icons */
.inline-icon {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.25rem;
}

/* Responsive Optimierungen */
@media (max-width: 768px) {
    .metaprogramm-icon {
        max-height: 180px;
        padding: 1rem;
    }

    .feature-image {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
}

/* Lazy Loading: Smooth Fade-In */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) {
    opacity: 1;
}

/* Print Styles für Bilder */
@media print {
    .feature-image,
    .metaprogramm-icon {
        page-break-inside: avoid;
        box-shadow: none;
    }
}