/**
 * ╔═══════════════════════════════════════════════════════════════════════════════╗
 * ║  UI IMPROVEMENTS - Minimal Critical Fixes Only                                ║
 * ║  MyInvest24 - Version 3.0 (Cleaned)                                           ║
 * ╠═══════════════════════════════════════════════════════════════════════════════╣
 * ║  FIXES ONLY:                                                                  ║
 * ║  1. CENTRAL DOT PATTERN - Only source for hero background dots               ║
 * ║  2. Mobile Menu - White bg, dark text                                         ║
 * ║  3. Stats Eyebrow Badge Contrast                                              ║
 * ║  4. Sticky Mobile CTA                                                         ║
 * ║  5. Icon Sizes in Trust/Contact Sections                                      ║
 * ╚═══════════════════════════════════════════════════════════════════════════════╝
 *
 * IMPORTANT: This file should NOT override existing page-specific styles.
 * Only apply fixes for specific contrast and visibility issues.
 */

/* =============================================================================
   0. CENTRAL DOT PATTERN - THE ONLY SOURCE FOR HERO BACKGROUND DOTS
   All other dot patterns have been disabled in enterprise-design-fixes.css
   and myinvest24-design-system.css to prevent duplication
   ============================================================================= */

/* Hero section positioning */
.hero,
.page-hero,
.hero-section,
section.hero {
    position: relative !important;
}

/* THE ONE AND ONLY DOT PATTERN */
.hero::before,
.page-hero::before,
.hero-section::before,
section.hero::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.08) 1.5px, transparent 1.5px) !important;
    background-size: 24px 24px !important;
    background-position: 0 0 !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Ensure content is above dot pattern */
.hero > *,
.page-hero > *,
.hero-section > *,
section.hero > * {
    position: relative;
    z-index: 2;
}

/* DISABLE any other dot patterns that might exist */
.page-hero__content::before {
    content: none !important;
    display: none !important;
}


/* =============================================================================
   1. MOBILE MENU FIX - Solid White Background
   ============================================================================= */
@media (max-width: 1024px) {
    .mobile-nav,
    nav.mobile-nav,
    #mobileNav {
        background: #ffffff !important;
        background-color: #ffffff !important;
        backdrop-filter: none !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    }

    .mobile-nav.active,
    .mobile-nav[aria-hidden="false"],
    .mobile-nav.is-open {
        background: #ffffff !important;
        opacity: 1 !important;
    }

    /* Mobile menu links - dark text */
    .mobile-nav__link,
    .mobile-nav a:not(.mobile-nav__cta) {
        color: #18181B !important;
        -webkit-text-fill-color: #18181B !important;
        text-shadow: none !important;
        background: transparent !important;
    }

    .mobile-nav__link:hover,
    .mobile-nav a:hover:not(.mobile-nav__cta) {
        background: #f4f4f5 !important;
    }

    /* Mobile CTA button - normal size */
    .mobile-nav__cta,
    .mobile-nav .btn--primary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 14px 28px !important;
        background: #18181B !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        width: auto !important;
        max-width: 280px !important;
        min-height: auto !important;
        height: auto !important;
        text-decoration: none !important;
        border: none !important;
    }

    .mobile-nav__cta svg,
    .mobile-nav .btn--primary svg {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
    }
}

/* =============================================================================
   2. STATS EYEBROW BADGE - Fix "UNSERE ERFOLGE" Contrast on Dark Section
   ============================================================================= */
.stats__eyebrow {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.stats .section__eyebrow,
section.stats .eyebrow {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* =============================================================================
   3. STICKY MOBILE CTA - DISABLED per user request
   ============================================================================= */
/* Hide the entire mobile sticky CTA bar */
.sticky-mobile-cta {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 768px) {
    .sticky-mobile-cta {
        display: none !important;
    }

    /* No padding needed anymore since sticky CTA is removed */
    body {
        padding-bottom: 0 !important;
    }
}

/* Legacy sticky CTA styles - kept but disabled */


/* =============================================================================
   4. ICON SIZE FIXES - Trust & Contact Sections
   ============================================================================= */

/* Trust badge icons - prevent oversized icons */
.trust-badge svg,
.trust-badge__icon svg,
.trust-badges svg,
[class*="trust"] svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    flex-shrink: 0 !important;
}

/* Contact/phone bar icons */
.contact-bar svg,
.contact-info svg,
.phone-icon svg,
[class*="contact"] svg,
[class*="phone"] svg:not(.mobile-nav svg) {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    flex-shrink: 0 !important;
}

/* =============================================================================
   5. FOOTER LINK HOVER - Prevent Black on Black
   ============================================================================= */
.footer a:hover,
.footer__link:hover,
footer a:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

/* =============================================================================
   6. CUSTOM SLIDER STYLING
   ============================================================================= */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #E4E4E7;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    margin: 10px 0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: #ffffff;
    border: 3px solid #18181B;
    border-radius: 50%;
    cursor: grab;
    margin-top: -8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #ffffff;
    border: 3px solid #18181B;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* =============================================================================
   7. HEADER CTA BUTTON HOVER - Blue on Hover
   ============================================================================= */
.header__cta:hover {
    background: #0066FF !important;
    background-color: #0066FF !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 102, 255, 0.35) !important;
}

/* =============================================================================
   8. HERO SECTION - Remove ALL White Backgrounds for Dot Pattern Visibility
   ============================================================================= */

/* Hero main containers */
html body section.hero,
.hero,
.hero__inner,
.container.hero__inner,
.hero__content {
    background: transparent !important;
    background-color: transparent !important;
}

/* Hero typography */
.hero__title,
.hero__title-accent,
.hero__text,
.hero__badge {
    background: transparent !important;
    background-color: transparent !important;
}

/* Hero actions/buttons container */
.hero__actions {
    background: transparent !important;
    background-color: transparent !important;
}

/* Stats container and items - with permanent light background */
.hero-stats {
    background: rgba(255, 255, 255, 0.85) !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(228, 228, 231, 0.5) !important;
    border-radius: 16px !important;
}

.hero-stat,
.hero-stat:hover {
    background: transparent !important;
    background-color: transparent !important;
}

.hero-stat__value,
.hero-stat__label {
    background: transparent !important;
    background-color: transparent !important;
}

/* Trust badges */
.trust-badges,
.trust-badge {
    background: transparent !important;
    background-color: transparent !important;
}

/* =============================================================================
   GLOBAL OUTLINE BUTTON FIX - Visible borders everywhere
   ============================================================================= */

/* ALL Outline buttons - must have visible border */
.btn--outline,
.btn.btn--outline,
a.btn--outline,
button.btn--outline {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #18181B !important;
    -webkit-text-fill-color: #18181B !important;
    border: 2px solid #18181B !important;
    font-weight: 600 !important;
}

/* Outline button in hero - transparent bg */
.hero .btn--outline,
.page-hero .btn--outline {
    background: transparent !important;
    background-color: transparent !important;
    color: #18181B !important;
    border: 2px solid #18181B !important;
}

/* Outline button hover - all */
.btn--outline:hover,
.btn.btn--outline:hover,
a.btn--outline:hover,
button.btn--outline:hover,
.hero .btn--outline:hover,
.page-hero .btn--outline:hover {
    background: #18181B !important;
    background-color: #18181B !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #18181B !important;
}

/* =============================================================================
   9. ALL BUTTONS - Ensure Readable Hover States
   ============================================================================= */

/* Primary button hover - white text */
.btn--primary:hover,
.btn.btn--primary:hover,
a.btn--primary:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Outline/Secondary button hover - white text on dark bg */
.btn--outline:hover,
.btn--secondary:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #18181B !important;
}

/* Ghost button hover */
.btn--ghost:hover {
    color: #18181B !important;
    -webkit-text-fill-color: #18181B !important;
}

/* =============================================================================
   10. GLOBAL HOVER FIX - Remove ALL white/light background hover effects
   ============================================================================= */

/* Feature Cards - NO white hover background anywhere on the site (except cards with inline background styles) */
.feature-card:not([style*="background"]):hover,
.feature-card:not([style*="background"]):focus,
.feature-card:not([style*="background"]):active {
    box-shadow: none !important;
}

/* Remove ripple effects on cards */
.feature-card::before,
.feature-card::after,
.card::before,
.card::after {
    content: none !important;
    display: none !important;
}

/* All card types - transparent hover */
.card:hover,
.card:focus,
.benefit-card:hover,
.benefit-card:focus,
.trust-box:hover,
.trust-box:focus,
.stats-card:hover,
.stats-card:focus,
.service-card:hover,
.service-card:focus,
.testimonial:hover,
.testimonial:focus,
.vorteile-card:hover,
.vorteile-card:focus,
.step-card:hover,
.step-card:focus {
    background: transparent !important;
    background-color: transparent !important;
}

/* Prevent white rectangle on hover for SPECIFIC elements only (not global) */
/* IMPORTANT: Do NOT use * selector - it breaks page-hero and body dot patterns */
.card:hover::before,
.card:hover::after,
.btn:hover::before,
.btn:hover::after,
.feature-card:hover::before,
.feature-card:hover::after,
.benefit-card:hover::before,
.benefit-card:hover::after,
.trust-box:hover::before,
.trust-box:hover::after,
.stats-card:hover::before,
.stats-card:hover::after,
.service-card:hover::before,
.service-card:hover::after,
.testimonial:hover::before,
.testimonial:hover::after,
.vorteile-card:hover::before,
.vorteile-card:hover::after,
.step-card:hover::before,
.step-card:hover::after,
.faq-item:hover::before,
.faq-item:hover::after {
    background: transparent !important;
    background-color: transparent !important;
}

/* NOTE: page-hero::before and body::before patterns are preserved 
   by NOT including them in the transparent background rules above */

/* Specifically target the ripple effect from enterprise-design-fixes.css */
.btn::before,
.header__cta::before,
[class*="cta"]::before {
    display: none !important;
}

/* Fix for features grid - cards should have white background but no hover overlay */
/* IMPORTANT: Do NOT use !important on .feature-card background - it breaks inline styles for dark cards */
.features-grid .feature-card:not([style*="background"]) {
    background: #ffffff;
}

.features-grid .feature-card:hover:not([style*="background"]),
.features-grid .feature-card:focus:not([style*="background"]) {
    background: #ffffff;
    box-shadow: none;
}

/* Cards with inline background styles (like card 06 "Beratung starten") keep their background automatically */

.features-grid .feature-card:hover {
    transform: translateX(4px);
    border-left-color: #18181B;
}

/* FAQ items - keep functional without white overlay */
.faq-item:hover,
.faq-item:focus {
    background: transparent !important;
    background-color: transparent !important;
}

/* Trust badges - no hover bg */
.trust-badge:hover,
.trust-badges:hover,
[class*="trust"]:hover {
    background: transparent !important;
    background-color: transparent !important;
}

/* General interactive elements - no background change needed */

/* Remove white rectangle tooltip/overlay effects */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[title]:hover::before,
[title]:hover::after {
    background: transparent !important;
}

/* =============================================================================
   11. FOOTER SOCIAL ICONS - White Hover Effect
   ============================================================================= */

/* Footer social icons - white background on hover */
.footer__social a:hover,
.footer__social a:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Dark icon color on white background hover */
.footer__social a:hover svg,
.footer__social a:focus svg {
    color: #18181B !important;
    fill: #18181B !important;
}

/* =============================================================================
   12. SUBPAGE FIXES - Hero Images & Stat Badges
   ============================================================================= */

/* Remove unwanted white frames around hero images on subpages */
.page-hero__image,
.hero-image-wrapper,
.image-card,
.hero-visual {
    border: none !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
}

/* Improve stat badge on hero images - Premium Dark Enterprise Design */
.page-hero__image-badge {
    position: absolute !important;
    bottom: 24px !important;
    left: 24px !important;
    right: auto !important;
    background: rgba(24, 24, 27, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
    padding: 20px 32px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* Stat value styling - Large, bold, WHITE for max contrast */
.page-hero__image-badge-value {
    font-size: 42px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Stat label styling - Subtle, uppercase, light gray */
.page-hero__image-badge-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* =============================================================================
   13. GLOBAL ANTI-WHITE-RECTANGLE FIXES
   ============================================================================= */

/* Prevent white backgrounds on elements inside dark containers */
[style*="background: linear-gradient"] *,
[style*="background: #18181B"] *,
[style*="background: #27272A"] *,
[style*="background-color: #18181B"] *,
[style*="background-color: #27272A"] * {
    background-color: transparent !important;
}

/* Exception: Buttons inside dark containers should keep their styling */
[style*="background: linear-gradient"] .btn,
[style*="background: linear-gradient"] button,
[style*="background: #18181B"] .btn,
[style*="background: #18181B"] button {
    background: #ffffff !important;
    color: #18181B !important;
}

/* Ensure feature card children on dark cards are transparent */
.feature-card[style] .feature-card__icon,
.feature-card[style] .feature-card__number,
.feature-card[style] .feature-card__title,
.feature-card[style] .feature-card__text,
.feature-card[style] .feature-card__arrow {
    background: transparent !important;
    background-color: transparent !important;
}

/* =============================================================================
   14. STAT CARDS - Remove Gray Borders
   ============================================================================= */

/* Remove gray box borders from stat cards */
.stat-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.stat-card:hover {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    transform: translateY(-5px);
}

/* Keep stat card value styling clean */
.stat-card__value {
    color: #18181B !important;
}

/* =============================================================================
   15. HERO IMAGE BADGE - Better Contrast (No Black Borders, White Text)
   ============================================================================= */

/* Override the page-hero image badge for better contrast */
.page-hero__image-badge {
    background: rgba(24, 24, 27, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) !important;
    padding: 20px 28px !important;
}

/* Remove ALL inner borders from badge children */
.page-hero__image-badge *,
.page-hero__image-badge > *,
.page-hero__image-badge div {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Badge value - WHITE text for maximum readability */
.page-hero__image-badge-value,
.page-hero__image-badge .page-hero__image-badge-value,
.page-hero__image-badge > div:first-child {
    font-size: 42px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    line-height: 1 !important;
    text-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Badge label - Light gray for good contrast */
.page-hero__image-badge-label,
.page-hero__image-badge .page-hero__image-badge-label,
.page-hero__image-badge > div:last-child {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 4px !important;
}

/* =============================================================================
   16. SERVICE CIRCLE CARDS - Hover Effects
   ============================================================================= */

/* Service Card Circle - Premium Hover Effect */
/* Only apply cursor and prepare for hover - don't override transitions */
.service-card-circle {
    position: relative;
    cursor: pointer;
}

/* IMPORTANT: Only apply hover effects to cards that are already animated in
   This prevents conflicts with the initial animation transform */
.service-card-circle.animate-in:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 50px rgba(24, 24, 27, 0.12), 
                0 10px 25px rgba(24, 24, 27, 0.08);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.35s ease !important;
}

/* Title color transition on hover */
.service-card-circle__title {
    transition: color 0.3s ease;
}

.service-card-circle.animate-in:hover .service-card-circle__title {
    color: #0066FF;
}

/* Number badge animation */
.service-card-circle__number {
    transition: all 0.3s ease;
    display: inline-block; /* Required for transform to work */
}

.service-card-circle.animate-in:hover .service-card-circle__number {
    color: #0066FF;
    transform: scale(1.15);
}

/* Subtle border glow on hover - using box-shadow for glow effect instead of ::before
   to avoid potential conflicts with existing ::before elements */
.service-card-circle.animate-in:hover {
    box-shadow: 0 20px 50px rgba(24, 24, 27, 0.12), 
                0 10px 25px rgba(24, 24, 27, 0.08),
                0 0 0 2px rgba(0, 102, 255, 0.08),
                inset 0 0 0 1px rgba(0, 102, 255, 0.05);
}

/* Text subtle animation */
.service-card-circle__text {
    transition: color 0.3s ease;
}

.service-card-circle.animate-in:hover .service-card-circle__text {
    color: #18181B;
}

/* Central circle pulse on card hover - affects parent */
.service-circle__grid:has(.service-card-circle.animate-in:hover) .service-circle__center {
    transform: scale(1.03);
}

.service-circle__center {
    transition: transform 0.4s ease;
}

/* Mobile optimization - slightly reduce effect intensity */
@media (max-width: 767px) {
    .service-card-circle.animate-in:hover {
        transform: translateY(-4px) scale(1.01) !important;
    }
}

/* =============================================================================
   16. PAGE HERO BADGE - Transparent Background (Remove White Rectangle)
   ============================================================================= */

/* The "EXKLUSIVE OBJEKTE", "ÜBER MYINVEST24" style badges */
.page-hero__badge {
    background: transparent !important;
    background-color: transparent !important;
    border: 2px solid #18181B !important;
    color: #18181B !important;
    padding: 10px 24px !important;
    border-radius: 100px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}

/* Pulse dot before badge */
.page-hero__badge::before {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    background: #18181B !important;
    border-radius: 50% !important;
}

/* Section eyebrow badges - also transparent */
.section__eyebrow {
    background: transparent !important;
    background-color: transparent !important;
    border: 2px solid #18181B !important;
    color: #18181B !important;
}

/* =============================================================================
   17. FOOTER LINK FIXES - Ensure light text on dark footer
   ============================================================================= */

/* Footer links - ensure they stay light on dark footer */
footer a,
.footer a,
.footer__link {
    color: rgba(255, 255, 255, 0.7) !important;
}

footer a:hover,
.footer a:hover,
.footer__link:hover {
    color: white !important;
}

/* =============================================================================
   18. GLOBAL FIX - Remove White Rectangle Frames from Hero Images & Badges
   ============================================================================= */

/* Remove white rectangular frames around ALL page hero elements on ALL subpages */
/* The white frames are caused by white backgrounds on inner containers */

/* Main hero container - transparent */
.page-hero,
html body .page-hero {
    background: transparent !important;
    background-color: transparent !important;
}

/* Hero inner container - this was causing the main white rectangle */
.page-hero__inner,
html body .page-hero__inner,
.page-hero .container,
html body .page-hero .container {
    background: transparent !important;
    background-color: transparent !important;
}

/* Hero content container - also had white background */
.page-hero__content,
html body .page-hero__content {
    background: transparent !important;
    background-color: transparent !important;
}

/* Remove white rectangular frames around page hero images */
.page-hero__image,
html body .page-hero__image {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Keep the image itself with subtle shadow, but no white frame */
.page-hero__image img,
html body .page-hero__image img {
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
    background: transparent !important;
}

/* Remove white background from hero badges (EXKLUSIVE OBJEKTE, etc.) */
.page-hero__badge,
.hero__badge,
html body .page-hero__badge,
html body .hero__badge,
[class*="hero"] .badge,
.section__eyebrow {
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure stat badges on images have dark background without white frames */
.page-hero__image-badge,
html body .page-hero__image-badge {
    background: rgba(24, 24, 27, 0.95) !important;
    border: none !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) !important;
}

/* Remove extra gray box around badge value and label - GLOBAL FIX FOR ALL SUBPAGES */
/* Override the [class*="badge"] selector from myinvest24-design-system.css */
html body .page-hero .page-hero__image-badge .page-hero__image-badge-value,
html body .page-hero .page-hero__image-badge .page-hero__image-badge-label,
html body .page-hero__image .page-hero__image-badge .page-hero__image-badge-value,
html body .page-hero__image .page-hero__image-badge .page-hero__image-badge-label,
.page-hero__image-badge-value[class*="badge"],
.page-hero__image-badge-label[class*="badge"],
.page-hero__image-badge .page-hero__image-badge-value,
.page-hero__image-badge .page-hero__image-badge-label,
html body [class*="page-hero__image-badge-value"],
html body [class*="page-hero__image-badge-label"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Override the generic [class*="badge"] selector completely for hero image badges */
html body .page-hero__image-badge > *,
html body .page-hero__image [class*="badge-value"],
html body .page-hero__image [class*="badge-label"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hero visual containers - no white frames */
.hero-visual,
.hero-image-wrapper,
.image-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure buttons have proper styling without white container backgrounds */
.page-hero__actions,
.page-hero__ctas,
html body .page-hero__actions,
html body .page-hero__ctas {
    background: transparent !important;
    background-color: transparent !important;
}

/* Fix for breadcrumb navigation - remove white background AND backdrop blur */
.breadcrumb,
.breadcrumbs,
.page-hero .breadcrumb,
.page-hero .breadcrumbs,
nav.breadcrumb,
[class*="breadcrumb"],
html body .breadcrumb,
html body .breadcrumbs {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Fix for all text containers in hero - transparent */
.page-hero p,
.page-hero h1,
.page-hero h2,
.page-hero__title,
.page-hero__text,
.page-hero__title-accent,
html body .page-hero p,
html body .page-hero h1,
html body .page-hero h2,
html body .page-hero__title,
html body .page-hero__text {
    background: transparent !important;
    background-color: transparent !important;
}

/* Container and wrapper elements - all transparent */
.container,
.wrapper,
.page-hero .container,
.page-hero .wrapper,
html body .container,
html body .wrapper {
    background: transparent !important;
    background-color: transparent !important;
}

/* =============================================================================
   DISABLE FLOATING CTA BUTTON - Per user request
   ============================================================================= */
html body .sticky-header-cta,
html body .sticky-header-cta.visible,
html body div.sticky-header-cta,
.sticky-header-cta,
.sticky-header-cta.visible,
div.sticky-header-cta {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* =============================================================================
   MOBILE/TABLET FIXES - Per user request
   ============================================================================= */

/* Fix: Hide scroll-indicator on tablet to prevent overlap with stats box */
@media (max-width: 1024px) {
    .scroll-indicator {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Fix: Make white text black for better readability on light backgrounds */
/* Trust badges and rating badges - ensure dark text on light background */
.hero__badge,
.page-hero__badge,
.rating-badge,
.trust-badge,
[class*="badge"],
.hero .badge,
.page-hero .badge {
    color: #18181B !important;
    -webkit-text-fill-color: #18181B !important;
}

@media (max-width: 768px) {
    .hero-stat__label,
    .stat__label,
    .stat-card__label,
    [class*="stat"] .label,
    .hero-stat span:not(.hero-stat__value) {
        color: #52525B !important;
        -webkit-text-fill-color: #52525B !important;
    }
}

/* =============================================================================
   HERO IMAGE BADGE FIX - Make +45.000€ etc readable
   ============================================================================= */

/* Hero image badge - dark background with white text for maximum contrast */
.hero__image-badge,
.page-hero__image-badge,
.hero-image-badge,
[class*="hero"] [class*="badge"]:not(.hero__badge):not(.page-hero__badge) {
    background: rgba(24, 24, 27, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: none !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) !important;
}

/* Badge text - WHITE for contrast on dark background */
.hero__image-badge strong,
.page-hero__image-badge strong,
.hero-image-badge strong,
[class*="hero"] [class*="badge"]:not(.hero__badge):not(.page-hero__badge) strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 42px !important;
    font-weight: 800 !important;
}

.hero__image-badge span,
.page-hero__image-badge span,
.hero-image-badge span,
[class*="hero"] [class*="badge"]:not(.hero__badge):not(.page-hero__badge) span {
    color: rgba(255, 255, 255, 0.9) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 12px !important;
}

/* =============================================================================
   HERO CONTAINER BACKGROUNDS - Make transparent (no white boxes)
   ============================================================================= */

/* Remove white boxes in hero sections */
.hero .hero__inner,
.page-hero .hero__inner,
.hero .container,
.page-hero .container,
.hero__content,
.page-hero__content,
.hero-content,
.page-hero-content {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Hero stats card - make sure they have proper styling */
.hero-stats,
.hero__stats,
.page-hero .hero-stats {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Individual stat items */
.hero-stat,
.hero__stat {
    background: transparent !important;
}

/* =============================================================================
   GLOBAL SUBPAGE FIXES - All pages consistent styling
   ============================================================================= */

/* 1. FONT CONSISTENCY - Override ALL page-specific styles */
/* Using maximum specificity to override inline styles */
html body,
html body *,
html body p,
html body span,
html body li,
html body a,
html body div,
html body label,
html body input,
html body button,
html body td,
html body th {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* CRITICAL: Override Playfair Display with Inter for headings */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .hero__title,
html body .page-hero__title,
html body .section__title,
html body .card__title,
html body [class*="title"],
html body [class*="heading"] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* 2. HERO TRUST BADGES - Remove borders, consistent styling */
.hero__trust-badges > div,
.hero .trust-badge,
.hero [style*="border-radius: 100px"],
.page-hero__trust-badges > div,
.page-hero .trust-badge,
[class*="hero"] [style*="background: rgba(255"],
[class*="hero"] [style*="background: rgba(16"] {
    background: rgba(24, 24, 27, 0.08) !important;
    border: none !important;
    color: #18181B !important;
    -webkit-text-fill-color: #18181B !important;
}

/* Star rating badge - keep green accent */
.hero__trust-badges > div:first-child,
[style*="rgba(16, 185, 129"] {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
    -webkit-text-fill-color: #10b981 !important;
    border: none !important;
}

/* 3. REMOVE WHITE/GRAY BACKGROUND DIFFERENCES */
.hero,
.page-hero,
section.hero {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
}

/* Hero containers - all transparent */
.hero > *,
.page-hero > *,
.hero .container,
.page-hero .container,
.hero__inner,
.page-hero__inner,
.hero__content,
.page-hero__content {
    background: transparent !important;
    background-color: transparent !important;
}

/* 4. HERO VISUAL CARDS - Proper glassmorphism on light background */
.hero__visual,
.hero__card,
.page-hero__visual,
.page-hero__card {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

/* 5. TIMELINE/STAT ITEMS in hero cards */
.hero__timeline-item,
.hero__card-item {
    background: rgba(0, 0, 0, 0.03) !important;
    border: none !important;
}

/* 6. STATS BOX with property info - proper styling */
.hero__stats-card,
.property-info,
[class*="stats-card"],
[class*="property-stats"] {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

/* 7. TEXT COLORS for light hero backgrounds */
.hero__title,
.page-hero__title {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

.hero__title span,
.page-hero__title span {
    color: #18181B !important;
    -webkit-text-fill-color: #18181B !important;
}

.hero__description,
.page-hero__description,
.hero__text,
.page-hero__text {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
}

/* 8. SVG ICONS in trust badges */
.hero__trust-badges svg,
[class*="trust"] svg {
    color: currentColor !important;
    stroke: currentColor !important;
}

/* =============================================================================
   UI/UX AUDIT FIXES - January 2026
   Based on comprehensive quality assurance review
   ============================================================================= */

/* -----------------------------------------------------------------------------
   ISSUE #10: Slider Thumb Visibility (Accessibility Improvement)
   Changed from dark border to blue accent color for better visibility
   ----------------------------------------------------------------------------- */
input[type="range"]::-webkit-slider-thumb {
    background: #0EA5E9 !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 2px 12px rgba(14, 165, 233, 0.4), 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
}

input[type="range"]::-webkit-slider-thumb:hover {
    background: #0284C7 !important;
    transform: scale(1.15);
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.5), 0 0 0 4px rgba(14, 165, 233, 0.2) !important;
}

input[type="range"]::-moz-range-thumb {
    background: #0EA5E9 !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 2px 12px rgba(14, 165, 233, 0.4) !important;
}

/* -----------------------------------------------------------------------------
   ISSUE #18: Footer Letter-Spacing (Typography Improvement)
   Increased tracking for uppercase headings for better readability
   ----------------------------------------------------------------------------- */
.footer__title,
.footer h4,
.footer h5,
footer [class*="title"],
footer [class*="heading"] {
    letter-spacing: 0.1em !important;
}

/* -----------------------------------------------------------------------------
   ISSUE #19: Social Icon Hover States (Interaction Enhancement)
   Added smooth transitions with opacity and transform
   ----------------------------------------------------------------------------- */
.footer__social a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.footer__social a:hover {
    opacity: 0.85 !important;
    transform: translateY(-3px) !important;
}

/* -----------------------------------------------------------------------------
   ISSUE #4: Trust Badge Icon Alignment
   Normalized icon sizes and vertical alignment
   ----------------------------------------------------------------------------- */
.trust-badge,
.trust-bar__item,
[class*="trust-"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.trust-badge svg,
.trust-bar__item svg,
[class*="trust-"] svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

/* -----------------------------------------------------------------------------
   ISSUE #5: Partner Logo Sizes (Consistency)
   Normalized all logos to consistent optical height
   ----------------------------------------------------------------------------- */
.partner-logos__img,
.partners__logo,
.partner-logo img,
[class*="partner"] img {
    max-height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* -----------------------------------------------------------------------------
   ISSUE #7: Service Card Heights (Equal Heights in Grid)
   Using CSS Grid for consistent card heights
   ----------------------------------------------------------------------------- */
.features-grid,
.service-grid,
.services__grid,
[class*="service-grid"] {
    display: grid !important;
    grid-auto-rows: 1fr !important;
}

.feature-card,
.service-card:not(.service-card-circle) {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.feature-card__text,
.service-card__text {
    flex-grow: 1 !important;
}

/* -----------------------------------------------------------------------------
   ISSUE #15: Testimonial Card Heights (Consistency)
   Added min-height for visual balance
   ----------------------------------------------------------------------------- */
.testimonial,
.testimonial-card,
[class*="testimonial"] {
    min-height: 280px !important;
    display: flex !important;
    flex-direction: column !important;
}

.testimonial__text,
.testimonial-card__text,
[class*="testimonial"] p {
    flex-grow: 1 !important;
}

/* -----------------------------------------------------------------------------
   ISSUE #13: Text Max-Width (Readability)
   Optimal line length for better reading experience
   ----------------------------------------------------------------------------- */
.content-text,
.section__description,
.about-text,
[class*="description"],
.page-hero__text,
main p:not(.stat-label):not(.testimonial__author):not(.feature-card__text) {
    max-width: 65ch;
}

/* -----------------------------------------------------------------------------
   ISSUE #11: Steuerrechner Button Color (Consistency)
   Changed black button to blue to match primary CTA color
   ----------------------------------------------------------------------------- */
.mi24-btn-weiter,
.steuer-btn-weiter,
[class*="steuer"] .btn--primary,
.mi24-btn-primary {
    background: #0EA5E9 !important;
    background-color: #0EA5E9 !important;
    border-color: #0EA5E9 !important;
    color: #ffffff !important;
}

.mi24-btn-weiter:hover,
.steuer-btn-weiter:hover,
[class*="steuer"] .btn--primary:hover,
.mi24-btn-primary:hover {
    background: #0284C7 !important;
    background-color: #0284C7 !important;
    border-color: #0284C7 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.35) !important;
}

/* -----------------------------------------------------------------------------
   ISSUE #2: Kapitalanlage Underline Width
   Ensure SVG underline is properly aligned to text width
   ----------------------------------------------------------------------------- */
.hero__title-accent {
    position: relative;
    display: inline-block;
}

.hero__title-accent::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100% !important;
    height: 8px;
    background: linear-gradient(90deg, #0EA5E9 0%, #38BDF8 100%);
    border-radius: 4px;
    opacity: 0.3;
}

/* If there's an SVG underline, constrain it */
.hero__title-accent svg,
.hero__title span svg {
    width: 100% !important;
    max-width: 100% !important;
}

/* -----------------------------------------------------------------------------
   ISSUE #3: Navigation Active State Fix
   Remove sticky active state when leaving page
   ----------------------------------------------------------------------------- */
.header__link {
    position: relative;
    transition: color 0.3s ease;
}

.header__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #18181B;
    transition: width 0.3s ease;
}

.header__link:hover::after {
    width: 100%;
}

/* Only show active state for actual current page */
.header__link[aria-current="page"]::after,
.header__link.active::after {
    width: 100%;
}

/* Reset on navigation change */
.header__link:not([aria-current="page"]):not(.active)::after {
    width: 0;
}

/* Dropdown hover shouldn't persist */
.header__link:not(:hover):not([aria-current="page"])::after {
    width: 0;
}

/* -----------------------------------------------------------------------------
   ISSUE #9: Step Cards Hover State
   Add clear interactive hover effect
   ----------------------------------------------------------------------------- */
.step-card,
.process-step,
[class*="step-card"],
.schritte-card {
    cursor: default;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-card:hover,
.process-step:hover,
[class*="step-card"]:hover,
.schritte-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Step number animation on hover */
.step-card__number,
.process-step__number,
[class*="step"] .number {
    transition: all 0.3s ease;
}

.step-card:hover .step-card__number,
.process-step:hover .process-step__number,
[class*="step-card"]:hover .number {
    transform: scale(1.1);
    background: #0EA5E9 !important;
    color: #ffffff !important;
}

/* -----------------------------------------------------------------------------
   ISSUE #14: Vorteile Circle SVG Sharpness
   Use CSS instead of blurry image for crisp rendering
   ----------------------------------------------------------------------------- */
.vorteile-center__circle,
.vorteile-circle,
[class*="vorteile"] .circle {
    border: 3px solid #18181B !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    /* Ensure crisp edges */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* -----------------------------------------------------------------------------
   ISSUE #17: Ratgeber Cards Hover State
   Unify with service card design
   ----------------------------------------------------------------------------- */
.ratgeber-card,
.guide-card,
[class*="ratgeber"] .card,
.ratgeber__item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #E4E4E7;
    border-radius: 16px;
    background: #ffffff;
}

.ratgeber-card:hover,
.guide-card:hover,
[class*="ratgeber"] .card:hover,
.ratgeber__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: #0EA5E9;
}

/* Icon circle consistent styling */
.ratgeber-card__icon,
.guide-card__icon,
[class*="ratgeber"] .card .icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(14, 165, 233, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ratgeber-card:hover .ratgeber-card__icon,
.guide-card:hover .guide-card__icon {
    background: #0EA5E9;
    color: #ffffff;
}

/* -----------------------------------------------------------------------------
   ISSUE #21: Dropdown Close Transition
   Add smooth transition when dropdown closes
   ----------------------------------------------------------------------------- */
.header__dropdown,
.mega-menu,
[class*="dropdown-menu"],
.nav-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none;
}

.header__nav-item:hover .header__dropdown,
.header__nav-item:focus-within .header__dropdown,
.mega-menu.active,
[class*="dropdown"]:hover .dropdown-menu,
.nav-item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Delay on close to prevent flicker */
.header__nav-item:not(:hover) .header__dropdown {
    transition-delay: 0.1s;
}

/* -----------------------------------------------------------------------------
   ISSUE #22: Scroll Indicator Enhancement
   Make scroll indicator more prominent
   ----------------------------------------------------------------------------- */
.scroll-indicator {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10;
    animation: scrollBounce 2s infinite;
}

.scroll-indicator__mouse {
    width: 28px;
    height: 44px;
    border: 2px solid rgba(24, 24, 27, 0.4);
    border-radius: 14px;
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
}

.scroll-indicator__wheel {
    width: 4px;
    height: 10px;
    background: #18181B;
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 2s infinite;
}

.scroll-indicator__text {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #18181B;
    opacity: 0.7;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-8px); }
}

@keyframes scrollWheel {
    0% { opacity: 1; top: 8px; }
    100% { opacity: 0; top: 24px; }
}

/* -----------------------------------------------------------------------------
   ISSUE #6: Partner Logo Duplication Fix (via CSS visibility)
   Hide duplicate partner section if two exist
   ----------------------------------------------------------------------------- */
/* If there are two partner sections, hide the second one */
.partners + .partners,
.partner-logos + .partner-logos,
section.partners ~ section.partners {
    display: none !important;
}

/* -----------------------------------------------------------------------------
   ISSUE #8: Statistics Duplication Fix (via CSS)
   Style second stats section differently or hide
   ----------------------------------------------------------------------------- */
/* If stats appear twice, make the second instance distinct */
.stats + .stats,
.hero-stats ~ .stats {
    /* Instead of hiding, style as "Unsere Erfolge" section differently */
    background: linear-gradient(135deg, #0f172a, #1e293b) !important;
    color: #ffffff !important;
}

/* -----------------------------------------------------------------------------
   ISSUE #12: Steuerrechner Headlines Redundancy Fix
   Hide duplicate/redundant headlines
   ----------------------------------------------------------------------------- */
/* If "Steuerrechner" badge AND headline both exist, style to avoid redundancy */
.mi24-badge + .mi24-headline,
.steuer-badge + .steuer-headline {
    margin-top: 0 !important;
}

/* Make section headline more distinct from widget headline */
section[id*="steuer"] > .container > h2:first-of-type,
.steuerrechner-section > h2 {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
}

/* Widget headline smaller */
.mi24-card h3,
.steuer-widget h3 {
    font-size: 1.25rem !important;
}

/* -----------------------------------------------------------------------------
   ISSUE #16: FAQ Visibility Fix
   Ensure all FAQ items are visible
   ----------------------------------------------------------------------------- */
.faq-section,
.faq-container,
[class*="faq"] {
    max-height: none !important;
    overflow: visible !important;
}

.faq-item,
.faq-question,
details.faq {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Remove any height restrictions */
.faq-list,
.faq__list,
[class*="faq-list"] {
    max-height: none !important;
    height: auto !important;
}

/* "Show more" button if exists - hide since all are visible */
.faq-show-more,
.faq-toggle-all,
[class*="faq"] .show-more {
    display: none !important;
}

/* =============================================================================
   UI AUDIT FIXES - Remaining Issues
   ============================================================================= */

/* -----------------------------------------------------------------------------
   FIX #3: Partner Logo Carousel - Prevent Duplicates
   ----------------------------------------------------------------------------- */
.partner-logos,
.partners-section,
[class*="partner"] [class*="carousel"],
[class*="partner"] [class*="slider"] {
    overflow: hidden !important;
}

.partner-logos .logo-item,
.partner-logo {
    flex-shrink: 0 !important;
    min-width: 120px !important;
    max-width: 150px !important;
}

/* Make sure logos don't repeat in visible area */
@media (min-width: 1024px) {
    .partner-logos,
    .partners-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 40px !important;
        justify-content: center !important;
    }
}

/* -----------------------------------------------------------------------------
   FIX #5: "Beratung starten" Card - Consistent with other cards
   ----------------------------------------------------------------------------- */
/* Option 1: Keep dark style but add visual separator */
.service-card--cta,
.feature-card--cta,
[class*="card"][class*="cta"],
.service-card:last-child,
.feature-card:last-child {
    /* Keep the dark style as intentional CTA */
    border: 2px solid rgba(24, 24, 27, 0.1) !important;
}

/* Option 2: OR make all cards uniform (uncomment if preferred) */
/*
.service-card,
.feature-card,
[class*="card"] {
    background: #ffffff !important;
    color: #18181B !important;
}
*/

/* -----------------------------------------------------------------------------
   FIX #6: H1 Decorative Underline - More spacing
   ----------------------------------------------------------------------------- */
.hero__title::after,
.page-hero__title::after,
h1[class*="hero"]::after {
    margin-top: 16px !important;
    /* More space from text descenders */
}

/* Hero title underline decoration */
.hero__title-underline,
[class*="title-decoration"],
.hero__title span::after {
    margin-top: 12px !important;
    bottom: -12px !important;
}

/* -----------------------------------------------------------------------------
   FIX #7/#8: Stats Section - Consistent spacing and alignment
   ----------------------------------------------------------------------------- */
.hero-stat,
.stat-item,
[class*="stat-item"],
.stats-box .stat {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.hero-stat__label,
.stat-label,
[class*="stat"] span:not([class*="value"]),
.stat-item p {
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    max-width: 100px !important;
    text-align: center !important;
}

/* Stats values consistency */
.hero-stat__value,
.stat-value,
[class*="stat"] [class*="value"],
.stat-item h3,
.stat-item strong {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #18181B !important;
    line-height: 1.2 !important;
}

/* -----------------------------------------------------------------------------
   FIX #10: Feature Cards - Same content height
   ----------------------------------------------------------------------------- */
.features__grid,
.service-grid,
[class*="feature"][class*="grid"],
[class*="service"][class*="grid"] {
    display: grid !important;
    grid-auto-rows: 1fr !important; /* Equal height rows */
}

.feature-card,
.service-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.feature-card__text,
.service-card__text,
.feature-card p,
.service-card p {
    flex-grow: 1 !important;
}

/* -----------------------------------------------------------------------------
   FIX #11: Scroll Indicator - Better visibility
   ----------------------------------------------------------------------------- */
.scroll-indicator {
    opacity: 0.7 !important;
    transition: opacity 0.3s ease !important;
}

.scroll-indicator:hover {
    opacity: 1 !important;
}

.scroll-indicator__text {
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

/* -----------------------------------------------------------------------------
   FIX #12: Footer - Consistent spacing
   ----------------------------------------------------------------------------- */
.footer__column,
.footer-column,
footer [class*="column"] {
    padding: 0 20px !important;
}

.footer__list,
.footer-list,
footer ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important; /* Consistent gap */
}

.footer__link,
.footer-link,
footer a {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Footer headings */
.footer__heading,
.footer-heading,
footer h4,
footer h5 {
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
}

/* -----------------------------------------------------------------------------
   FIX #13: Ratgeber Cards - Icon consistency
   ----------------------------------------------------------------------------- */
.ratgeber-card__icon,
.guide-card__icon,
[class*="ratgeber"] svg,
[class*="guide"] svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 1.5 !important;
}

/* -----------------------------------------------------------------------------
   FIX #14: FAQ Dropdowns - Larger touch targets
   ----------------------------------------------------------------------------- */
.faq__question,
.faq-question,
[class*="faq"] button,
[class*="faq"] summary {
    min-height: 56px !important;
    padding: 16px 20px !important;
    cursor: pointer !important;
}

.faq__question svg,
.faq-question svg,
[class*="faq"] [class*="arrow"],
[class*="faq"] [class*="icon"] {
    width: 20px !important;
    height: 20px !important;
}

/* -----------------------------------------------------------------------------
   FIX #15: Button Shadows - Consistent
   ----------------------------------------------------------------------------- */
.btn--primary,
.btn-primary,
a.btn--primary,
button.btn--primary,
.header__cta,
[class*="cta-button"],
[class*="primary-btn"] {
    box-shadow: 0 4px 12px rgba(24, 24, 27, 0.25) !important;
}

.btn--primary:hover,
.btn-primary:hover,
.header__cta:hover {
    box-shadow: 0 6px 20px rgba(24, 24, 27, 0.35) !important;
}

/* -----------------------------------------------------------------------------
   FIX #16: Dark Stats Section - Optional subtle glow on numbers
   ----------------------------------------------------------------------------- */
.stats-section--dark .stat-value,
.dark-section .stat-value,
[class*="dark"] [class*="stat"] [class*="value"] {
    color: #ffffff !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1) !important;
}

/* -----------------------------------------------------------------------------
   ADDITIONAL: Trust Badges - Clean styling without borders
   ----------------------------------------------------------------------------- */
.trust-badge,
.trust-item,
[class*="trust-badge"],
[class*="hero"] [class*="trust"] {
    background: rgba(24, 24, 27, 0.05) !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #18181B !important;
}

/* Green success badge for ratings */
.trust-badge--success,
[class*="rating-badge"],
[style*="rgb(16, 185, 129)"],
.trust-badge:first-child {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
}

/* =============================================================================
   PRIVATE INVESTOR PAGE - DARK THEME OVERRIDE
   This page uses a dark premium theme - override light theme hero styles
   ============================================================================= */

/* Body background for dark theme pages */
body.dark-theme,
html[data-theme="dark"] body {
    background: #000000 !important;
}

/* Private Investor Hero - Dark Theme Text Colors */
body:has(.hero[style*="--bg-void"]) .hero__title,
body:has(.hero .hero__bg-video) .hero__title,
.hero[style*="--bg-void"] .hero__title,
.hero:has(.hero__bg-video) .hero__title,
.hero:has(.hero__bg-overlay) .hero__title,
/* Direct selectors for private-investor page */
section.hero .hero__title,
section.hero .hero__title-line,
section.hero .hero__title-accent {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Private Investor - Eyebrow Text */
section.hero .hero__eyebrow-text,
section.hero .hero__eyebrow,
.hero:has(.hero__bg-overlay) .hero__eyebrow-text {
    color: var(--accent, #D4AF37) !important;
    -webkit-text-fill-color: var(--accent, #D4AF37) !important;
    background: transparent !important;
}

/* Private Investor - Subtitle */
section.hero .hero__subtitle,
.hero:has(.hero__bg-overlay) .hero__subtitle {
    color: rgba(255, 255, 255, 0.7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
    background: transparent !important;
}

/* Private Investor - Metrics */
section.hero .hero__metrics,
section.hero .hero__metric,
section.hero .hero__metric-value,
section.hero .hero__metric-label {
    background: transparent !important;
    background-color: transparent !important;
}

section.hero .hero__metric-value {
    color: var(--accent, #D4AF37) !important;
    -webkit-text-fill-color: var(--accent, #D4AF37) !important;
}

section.hero .hero__metric-label {
    color: rgba(255, 255, 255, 0.5) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}

/* Private Investor - Buttons in dark hero */
section.hero .btn--outline {
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

section.hero .btn--outline:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--accent, #D4AF37) !important;
    color: var(--accent, #D4AF37) !important;
    -webkit-text-fill-color: var(--accent, #D4AF37) !important;
}

/* Private Investor - Container transparency */
section.hero .container,
section.hero .hero__content,
section.hero .hero__actions {
    background: transparent !important;
    background-color: transparent !important;
}

/* Network Stats Section (dark) */
.network-stats,
.network-stat {
    background: transparent !important;
}

.network-stat__value {
    color: var(--accent, #D4AF37) !important;
    -webkit-text-fill-color: var(--accent, #D4AF37) !important;
}

.network-stat__label {
    color: rgba(255, 255, 255, 0.6) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
}