/* ===================================
   FULL-WIDTH LAYOUT OVERRIDE
   Nutzt die gesamte Bildschirmbreite
   =================================== */

/* Container für volle Breite - behält aber sinnvolle Paddings */
.container {
    max-width: none !important;
    width: 100%;
    padding: 0 clamp(1rem, 3vw, 4rem); /* Responsive Padding */
}

/* Hero Section - volle Breite */
.hero {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.hero .container {
    padding: 0 clamp(2rem, 5vw, 6rem);
    max-width: none !important;
}

.hero-content {
    max-width: none !important;
    width: 100%;
    display: block !important;
}

/* Hero Text - keine Breitenbeschränkung */
.hero-text {
    max-width: none !important;
    width: 100% !important;
}

/* Spezifisch für fade-in-up mit inline styles */
.hero .fade-in-up {
    max-width: none !important;
    width: 100% !important;
}

/* Alle Hero-Elemente volle Breite */
.hero h1,
.hero p,
.hero div,
.hero-text > * {
    max-width: none !important;
}

/* Überschreibe inline styles mit !important */
.hero [style*="max-width"] {
    max-width: none !important;
}

/* Sections - volle Breite mit responsive Padding */
section {
    width: 100%;
    padding: var(--spacing-4xl) clamp(2rem, 5vw, 6rem);
}

/* Carousel Container - 95% Breite für bessere Lesbarkeit */
.carousel-section {
    width: 100%;
    padding: var(--spacing-4xl) 0;
}

.carousel-section .container {
    max-width: none !important;
    width: 95%;
    margin: 0 auto;
    padding: 0 clamp(1rem, 2vw, 3rem);
}

.carousel-container {
    max-width: none !important;
    width: 100%;
    margin: 0 auto;
}

/* Features Grid - volle Breite nutzen */
.features-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1rem, 3vw, 2rem);
}

/* Platform Features - volle Breite */
.platform-features .container {
    max-width: none !important;
    width: 100%;
}

.feature-showcase {
    padding: clamp(2rem, 4vw, 3rem);
    gap: clamp(2rem, 4vw, 4rem);
}

/* Pricing Grid - responsive */
.pricing-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    max-width: none !important;
    gap: clamp(1.5rem, 3vw, 2rem);
}

/* Benefits Grid - volle Breite */
.benefits-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    max-width: none !important;
    gap: clamp(1.5rem, 3vw, 2rem);
}

/* Consulting Grid - 3 Spalten über gesamte Breite */
.consulting-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: clamp(1.5rem, 3vw, 2rem);
}

/* Partner Showcase - volle Breite */
.partner-showcase {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(2rem, 4vw, 3rem);
}

/* Comparison Table - responsive */
.comparison-table-wrapper {
    max-width: none !important;
    width: 100%;
}

/* FAQ - volle Breite mit max-width für Lesbarkeit */
.faq-list {
    max-width: 1400px;
    margin: 0 auto;
}

/* Steps Container - responsive */
.steps-container {
    max-width: none !important;
    gap: clamp(1rem, 3vw, 2rem);
}

/* CTA Content - zentriert aber volle Breite */
.cta-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Video Container - größer für bessere Sichtbarkeit */
.video-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Demo Features - responsive */
.demo-features {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    max-width: none !important;
}

/* Section Header - zentriert mit angepasster Breite */
.section-header {
    max-width: 900px;
    margin: 0 auto var(--spacing-4xl);
    padding: 0 2rem;
}

/* Integration Process - volle Breite */
.integration-process {
    padding: clamp(2rem, 4vw, 3rem);
}

.process-steps {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    max-width: none !important;
}

/* Navigation - volle Breite */
.navbar {
    width: 100%;
}

.navbar .container {
    padding: var(--spacing-md) clamp(2rem, 5vw, 6rem);
}

/* Responsive Breakpoints */

/* Desktop XL (1920px+) */
@media (min-width: 1920px) {
    .container {
        padding: 0 clamp(4rem, 8vw, 12rem);
    }
    
    .hero .container {
        padding: 0 clamp(4rem, 8vw, 12rem);
    }
    
    section {
        padding: var(--spacing-4xl) clamp(4rem, 8vw, 12rem);
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .container {
        padding: 0 clamp(1.5rem, 3vw, 3rem);
    }
    
    .hero .container {
        padding: 0 clamp(1.5rem, 3vw, 3rem);
    }
    
    section {
        padding: var(--spacing-3xl) clamp(1.5rem, 3vw, 3rem);
    }
    
    .carousel-section .container {
        width: 98%;
    }
    
    .feature-showcase {
        grid-template-columns: 1fr;
        padding: clamp(1.5rem, 3vw, 2rem);
    }
    
    .feature-showcase.reverse {
        grid-template-columns: 1fr;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
    
    .hero .container {
        padding: 0 1rem;
    }
    
    section {
        padding: var(--spacing-2xl) 1rem;
    }
    
    .carousel-section .container {
        width: 100%;
        padding: 0 0.5rem;
    }
    
    .features-grid,
    .benefits-grid,
    .consulting-grid,
    .partner-showcase,
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .navbar .container {
        padding: var(--spacing-md) 1rem;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .container {
        padding: 0 0.75rem;
    }
    
    section {
        padding: var(--spacing-xl) 0.75rem;
    }
}

/* Print - kompakte Ansicht */
@media print {
    .container {
        max-width: 100% !important;
        padding: 0 1cm;
    }
}
/* ===== FAQ "Warum unifina?" – Titel: Unterstreichung & visited-Farbe neutralisieren ===== */
.faq-section .section-header .section-title,
.faq-section .section-header .section-title a {
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  color: inherit !important;
}
/* Verhindert violett/lila "visited" Farbe am Titel-Link, falls der Titel verlinkt wird */
.faq-section .section-header a:link,
.faq-section .section-header a:visited {
  color: inherit !important;
  text-decoration: none !important;
}

/* Für den Fall, dass irgendwo ein pseudo-Underline gesetzt wurde */
.faq-section .section-header .section-title::after,
.faq-section .section-header .section-title::before {
  content: none !important;
}

/* ===== FAQ-Karten volle Seitenbreite ===== */
.faq-section .container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.faq-section .faq-list {
  max-width: 100% !important;
  margin: 0 !important;
}

/* Karten randlos über die volle Breite, mit komfortablem Innenabstand */
.faq-section .faq-item {
  border-radius: 0 !important;
  margin: 0 0 var(--spacing-lg) 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

.faq-section .faq-question,
.faq-section .faq-answer p {
  padding-left: clamp(16px, 4vw, 48px) !important;
  padding-right: clamp(16px, 4vw, 48px) !important;
}

/* Optional: dünne, neutrale Trennlinie oben/unten statt farbiger Linien */
.faq-section .faq-item {
  border-top: 1px solid var(--gray-200) !important;
  border-bottom: 1px solid var(--gray-200) !important;
}

/* Breadcrumb- oder generelle Link-Unterstreichungen in dieser Section sicher entfernen */
.faq-section a {
  text-decoration: none;
}
.faq-section a:hover {
  text-decoration: underline; /* wenn du einen Hover willst – sonst entfernen */
}