/*
 * SAYses.com - Custom CSS
 * Theme: SAYses Blau (#3039FD)
 * Erstellt: 2026-01-19
 */

/* ============================================
   CSS VARIABLEN OVERRIDE
   ============================================ */
:root {
    /* Hauptfarben - SAYses Blau */
    --my-main-theme: #3039FD;
    --my-main-theme-rgb: 48, 57, 253;
    --my-main-theme-hover: #1e2a78;
    --my-main-theme-hover-rgb: 30, 42, 120;

    /* Link-Farben */
    --my-link-color: #3039FD;
    --my-link-color-rgb: 48, 57, 253;
    --my-link-hover-color: #1e2a78;
    --my-link-hover-color-rgb: 30, 42, 120;

    /* Default Override */
    --my-default: #3039FD;
    --my-default-rgb: 48, 57, 253;
    --my-red: #3039FD;
    --my-red-rgb: 48, 57, 253;
    --my-red-dark: #1e2a78;
    --my-red-dark-rgb: 30, 42, 120;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-default,
.btn.btn-default,
a.btn-default {
    background-color: #3039FD !important;
    border-color: #3039FD !important;
    color: #fff !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn.btn-default:hover,
a.btn-default:hover {
    background-color: #1e2a78 !important;
    border-color: #1e2a78 !important;
    color: #fff !important;
}

/* Outline Buttons */
.btn-outline-default {
    border-color: #3039FD !important;
    color: #3039FD !important;
}

.btn-outline-default:hover {
    background-color: #3039FD !important;
    color: #fff !important;
}

/* ============================================
   LINKS
   ============================================ */
a {
    color: #3039FD;
}

a:hover,
a:focus {
    color: #1e2a78;
}

/* ============================================
   HEADER / NAVIGATION
   ============================================ */
.area-header .nav-main-items > li > a:hover,
.area-header .nav-main-items > li.active > a,
.area-header .nav-main-items > li > a:focus {
    color: #3039FD !important;
}

.nav-main-items .nav-menu li a:hover,
.nav-main-items .nav-menu li.active > a {
    color: #3039FD !important;
}

.head .nav-toggle-btn:hover .nav-burger,
.head .nav-toggle-btn:focus .nav-burger {
    background-color: #3039FD !important;
}

.head .nav-toggle-btn:hover .nav-burger::before,
.head .nav-toggle-btn:hover .nav-burger::after,
.head .nav-toggle-btn:focus .nav-burger::before,
.head .nav-toggle-btn:focus .nav-burger::after {
    background-color: #3039FD !important;
}

/* Mobile Navigation */
.nav-main-mobile-logo,
.nav-aside .nav-main-items > li > a:hover {
    color: #3039FD !important;
}

/* ============================================
   BADGE / LABELS
   ============================================ */
.badge-default,
.badge.bg-default,
.label-default {
    background-color: #3039FD !important;
}

/* ============================================
   ALERTS
   ============================================ */
.alert-default {
    background-color: #3039FD !important;
    border-color: #1e2a78 !important;
}

/* ============================================
   TEASER / CONTENT BOXES
   ============================================ */
.teaser-btn,
.piece-btn {
    background-color: #3039FD !important;
    border-color: #3039FD !important;
}

.teaser-btn:hover,
.piece-btn:hover {
    background-color: #1e2a78 !important;
    border-color: #1e2a78 !important;
}

/* ============================================
   ACCORDION / TABS
   ============================================ */
.accordion .acco-toggle:hover,
.accordion .acco-toggle:focus,
.accordion .acco-toggle.collapsed:hover {
    color: #3039FD !important;
}

.accordion .acco-toggle:not(.collapsed) {
    color: #3039FD !important;
    border-color: #3039FD !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    color: #3039FD !important;
    border-color: #3039FD !important;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination .page-item.active .page-link {
    background-color: #3039FD !important;
    border-color: #3039FD !important;
}

.pagination .page-link:hover {
    color: #3039FD !important;
}

/* ============================================
   FORMS
   ============================================ */
.form-control:focus {
    border-color: #3039FD !important;
    box-shadow: 0 0 0 0.2rem rgba(48, 57, 253, 0.25) !important;
}

input[type="submit"],
button[type="submit"] {
    background-color: #3039FD !important;
    border-color: #3039FD !important;
    color: #fff !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: #1e2a78 !important;
    border-color: #1e2a78 !important;
}

/* ============================================
   ICONS / SOCIAL
   ============================================ */
.icon-default,
.social-icons a:hover {
    color: #3039FD !important;
}

/* ============================================
   FOOTER
   ============================================ */
.area-foot a:hover {
    color: #3039FD !important;
}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb a:hover {
    color: #3039FD !important;
}

/* ============================================
   SECTION COLORED BACKGROUNDS
   ============================================ */
.bc-default,
.box-default {
    background-color: #3039FD !important;
}

/* Gradient Override */
.bg-gradient,
.overlay-gradient {
    background: linear-gradient(166deg, #4050ff 0%, #1e2a78 100%) !important;
}

/* ============================================
   SELECTION / HIGHLIGHT
   ============================================ */
::selection {
    background-color: #3039FD;
    color: #fff;
}

::-moz-selection {
    background-color: #3039FD;
    color: #fff;
}

/* ============================================
   SPINNER / LOADING
   ============================================ */
.spinner-border.text-default {
    color: #3039FD !important;
}

/* ============================================
   MERCURY THEME ROT-OVERRIDE
   ============================================ */

/* Alle Standard Mercury Rot-Töne überschreiben */
.bg-red,
.text-red {
    background-color: #3039FD !important;
    color: #fff !important;
}

/* ============================================
   SAYSES SPEZIFISCH
   ============================================ */

/* Hero Section Styling */
.hero-section {
    background: linear-gradient(135deg, #1a365d 0%, #3039FD 100%);
}

/* Feature Cards */
.feature-card {
    border-left: 4px solid #3039FD;
}

.feature-card:hover {
    box-shadow: 0 4px 12px rgba(48, 57, 253, 0.2);
}

/* Call-to-Action Buttons */
.cta-button {
    background-color: #3039FD;
    color: #fff;
    padding: 12px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #1e2a78;
    color: #fff;
}

/* Vergleichstabelle Icons */
.fa-check {
    color: #16a34a !important;
}

.fa-times {
    color: #dc2626 !important;
}


                                                                                                                                                  
.rounded-3 img {                                                                                                                                   
    border-radius: 12px;                                                                                                                        
}       

.rounded-4 img {                                                                                                                                   
    border-radius: 16px;                                                                                                                        
}                                                                                                                                               

                                                                                                                                                  
.rounded-55 img {                                                                                                                                   
    border-radius: 20px;                                                                                                                        
}                                                                                                                                               
        
  
  
/* ============================================
   LAYOUT AREA HINTERGRUNDFARBEN
   ============================================ */

/* Hellblauer Hintergrund für Layout Areas */
.bg-light-blue {
    background-color: #edf5ff !important;
}

/* Weisser Text fuer Content Sections */
.text-white,
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white li,
.text-white span,
.text-white a {
    color: #ffffff !important;
    font-size: 140%;
}





/* ========================================                                                                                              
     Slider: Bild links, Text rechts                                                                                                       
     CSS-Selektor im Element: slider-split                                                                                                 
     ======================================== */                                                                                           
                                                                                                                                           
  /* KRITISCH: Presized-Mechanismus deaktivieren */                                                                                        
  .slider-split .image-src-box.presized {                                                                                                  
      height: auto !important;                                                                                                             
      padding-bottom: 0 !important;                                                                                                        
      display: block !important;                                                                                                           
  }                                                                                                                                        
                                                                                                                                           
  .slider-split .image-src-box.presized img,                                                                                               
  .slider-split .image-src-box.presized .img {                                                                                             
      position: static !important;                                                                                                         
      height: auto !important;                                                                                                             
      max-height: 600px !important;                                                                                                        
      width: auto !important;                                                                                                              
      max-width: 100% !important;                                                                                                          
  }                                                                                                                                        
                                                                                                                                           
  /* Overflow hidden auf slider-box um Überlappung zu verhindern */
  .slider-split.hero-slider .slider-box {
      overflow: hidden !important;
  }

  .slider-split .slide-container,
  .slider-split .slide-wrapper,
  .slider-split .image-src-box {
      overflow: visible !important;
  }                                                                                                                                        
                                                                                                                                           
  /* Container-Höhen anpassen */                                                                                                           
  .slider-split.hero-slider,                                                                                                               
  .slider-split .slider-box,                                                                                                               
  .slider-split .slide-definitions,                                                                                                        
  .slider-split .slide-wrapper,                                                                                                            
  .slider-split .slide-container,                                                                                                          
  .slider-split .visual,                                                                                                                   
  .slider-split .slides,                                                                                                                   
  .slider-split .slide-xl {                                                                                                                
      height: auto !important;                                                                                                             
      min-height: 500px !important;                                                                                                        
      max-height: none !important;                                                                                                         
  }                                                                                                                                        
                                                                                                                                           
  /* Flexbox-Layout: Bild links, Text rechts */                                                                                            
  .slider-split .slide-container {                                                                                                         
      display: flex !important;                                                                                                            
      flex-direction: row !important;                                                                                                      
      align-items: center !important;                                                                                                      
  }                                                                                                                                        
                                                                                                                                           
  /* Bildbereich */                                                                                                                        
  .slider-split .visual {                                                                                                                  
      flex: 0 0 35% !important;                                                                                                            
      max-width: 35% !important;                                                                                                           
  }                                                                                                                                        
                                                                                                                                           
  /* Nur XL-Bild anzeigen (Desktop) */                                                                                                     
  .slider-split .slide-xs,                                                                                                                 
  .slider-split .slide-sm,                                                                                                                 
  .slider-split .slide-md,                                                                                                                 
  .slider-split .slide-lg {                                                                                                                
      display: none !important;                                                                                                            
  }                                                                                                                                        
                                                                                                                                           
  .slider-split .slide-xl {                                                                                                                
      display: block !important;                                                                                                           
      visibility: visible !important;                                                                                                      
  }                                                                                                                                        
                                                                                                                                           
  /* Textbereich rechts */                                                                                                                 
  .slider-split .captions {                                                                                                                
      position: static !important;                                                                                                         
      flex: 0 0 65% !important;                                                                                                            
      max-width: 65% !important;                                                                                                           
      padding: 30px !important;                                                                                                            
      height: auto !important;                                                                                                             
  }                                                                                                                                        
                                                                                                                                           
  .slider-split .caption {
      position: static !important;
      transform: none !important;
      text-align: left;
      background-color: transparent !important;
  }                                                                                                                                        
                                                                                                                                           
  .slider-split .subcaption small {
      font-size: 1.3em;
      color: #fff;
      line-height: 1.8;
      text-align: left !important;
      display: block !important;
  }

  .slider-split .captions,
  .slider-split .caption,
  .slider-split .subcaption {
      text-align: left !important;
  }                                                                                                                                        
                                                                                                                                           
  /* ========================================                                                                                              
     Mobile: Bild oben, Text unten                                                                                                         
     ======================================== */                                                                                           
  @media (max-width: 767px) {                                                                                                              
      .slider-split .slide-container {                                                                                                     
          flex-direction: column !important;                                                                                               
      }                                                                                                                                    
                                                                                                                                           
      .slider-split .visual,                                                                                                               
      .slider-split .captions {                                                                                                            
          flex: 0 0 100% !important;                                                                                                       
          max-width: 100% !important;                                                                                                      
      }                                                                                                                                    
                                                                                                                                           
      .slider-split .slide-xl {                                                                                                            
          display: none !important;                                                                                                        
      }                                                                                                                                    
                                                                                                                                           
      .slider-split .slide-xs {                                                                                                            
          display: block !important;                                                                                                       
          visibility: visible !important;                                                                                                  
      }                                                                                                                                    
                                                                                                                                           
      .slider-split .image-src-box.presized img {                                                                                          
          max-height: 350px !important;                                                                                                    
      }                                                                                                                                    
  }