/* ===== UX OPTIMIERUNGEN BASIEREND AUF ISSUE_3.PDF ===== */
/* Version: 1.0 - Professional UX Fixes */

/* === COOKIE BANNER FIX - KLEINES ECKBANNER === */
/* Spezifische Cookie-Plugin Selektoren */
.cli-modal-backdrop,
.cli-popupbar-settings,
.cli-modal-dialog,
.cookie-law-info-bar,
.cookie-consent-banner,
*[class*="cookie-law"],
*[class*="cookie-consent"],
*[class*="cookielawinfo"],
*[id*="cookie-law"],
*[id*="cookielawinfo"] {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
    top: auto !important;
    width: 320px !important;
    max-width: 320px !important;
    min-width: 280px !important;
    height: auto !important;
    max-height: 400px !important;
    z-index: 999999 !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    padding: 15px !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
}

/* AGGRESSIVE REMOVAL OF WHITE BACKDROP */
.cli-modal-backdrop,
.cli-modal-backdrop-container,
.cli-modal-backdrop .cli-modal-backdrop-container,
.cli-modal-backdrop::before,
.cli-modal-backdrop::after,
.cookie-overlay,
.cookie-backdrop,
.cookie-law-backdrop,
*[class*="cookie"] .overlay,
*[class*="cookie"] .backdrop,
*[class*="modal-backdrop"],
*[class*="cli-modal-backdrop"],
body.cli-modal-open::before,
body.cli-modal-open::after,
div[style*="position: fixed"][style*="top: 0"][style*="left: 0"][style*="right: 0"][style*="bottom: 0"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
}

/* Remove body scroll lock and modal state */
body.cli-modal-open,
body[class*="cookie-modal-open"] {
    overflow: auto !important;
    position: static !important;
}

/* Force hide any fullscreen overlays */
div[style*="position: fixed"][style*="background"] {
    background: transparent !important;
    display: none !important;
}

/* === SERVICES GRID AND CARDS === */
/* REMOVED: All Services CSS moved to services-unified.css for Single Source of Truth architecture */
/* This prevents conflicts between UX system and services control system */

/* === HERO SECTION ENHANCEMENT === */
/* REMOVED: All Hero CSS moved to hero-unified.css for Single Source of Truth architecture */
/* This prevents conflicts between UX system and hero control system */

/* === CTA BUTTONS OPTIMIZATION === */
.cta-button,
.site-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 32px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    min-height: 56px !important; /* Touch-optimiert für Senioren */
    cursor: pointer !important;
}

.cta-button:hover,
.site-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0,124,186,0.3) !important;
}

/* === TYPOGRAPHY ENHANCEMENTS === */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
}

p, li {
    line-height: 1.6 !important;
    font-size: 1.1rem !important; /* Größer für Senioren */
}

/* === ACCESSIBILITY IMPROVEMENTS === */
/* REMOVED: Navigation styles moved to navigation-critical-fix.css */
/* This prevents conflicts between UX system and navigation control */

/* FOCUS STATES */
a:focus,
button:focus,
input:focus {
    outline: 3px solid #007cba !important;
    outline-offset: 2px !important;
}

/* === TRUST INDICATORS === */
.trust-section {
    background: #f8f9fa !important;
    padding: 60px 0 !important;
    text-align: center !important;
}

.trust-stats {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 40px !important;
    margin: 40px 0 !important;
}

.trust-stat {
    padding: 20px !important;
}

.trust-number {
    font-size: 3rem !important;
    font-weight: 700 !important;
    color: #007cba !important;
    display: block !important;
}

.trust-label {
    font-size: 1.1rem !important;
    color: #666666 !important;
    margin-top: 10px !important;
}

/* === TESTIMONIALS ENHANCEMENT === */
/* REMOVED: All Testimonials CSS moved to testimonials-unified.css for Single Source of Truth architecture */
/* This prevents conflicts between UX system and testimonials control system */

/* === MOBILE OPTIMIZATIONS === */
@media (max-width: 768px) {
    /* REMOVED: Hero mobile styles moved to hero-unified.css */
    
    /* REMOVED: Services mobile styles moved to services-unified.css */
    
    .trust-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
    }
    
    /* KOMPAKTES COOKIE BANNER für Mobile */
    .cookie-banner,
    *[class*="cookie"],
    *[id*="cookie"] {
        bottom: 10px !important;
        right: 10px !important;
        left: 10px !important;
        max-width: none !important;
        padding: 12px !important; /* Kleinerer Abstand */
        font-size: 0.9rem !important; /* Kompaktere Schrift */
        line-height: 1.4 !important;
        border-radius: 8px !important; /* Kleinerer Radius */
    }
    
    /* Cookie Banner Buttons kompakt */
    .cookie-banner button,
    .cookie-banner .button,
    *[class*="cookie"] button,
    *[id*="cookie"] button {
        padding: 8px 16px !important; /* Kleinere Buttons */
        font-size: 0.85rem !important;
        margin: 5px 3px !important;
        border-radius: 6px !important;
        min-height: 36px !important; /* Touch-freundlich aber kompakt */
    }
    
    /* Cookie Banner Text kompakt */
    .cookie-banner p,
    .cookie-banner div,
    *[class*="cookie"] p,
    *[id*="cookie"] div {
        margin-bottom: 8px !important; /* Weniger Abstand */
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 480px) {
    .trust-stats {
        grid-template-columns: 1fr !important;
    }
    
    /* EXTRA KOMPAKTES COOKIE BANNER für sehr kleine Mobile */
    .cookie-banner,
    *[class*="cookie"],
    *[id*="cookie"] {
        bottom: 5px !important;
        right: 5px !important;
        left: 5px !important;
        padding: 10px !important; /* Noch kleiner */
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
    }
    
    /* Extra kleine Buttons für kleine Screens */
    .cookie-banner button,
    .cookie-banner .button,
    *[class*="cookie"] button,
    *[id*="cookie"] button {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
        margin: 3px 2px !important;
        min-height: 32px !important;
    }
    
    /* Noch kompaktere Texte */
    .cookie-banner p,
    .cookie-banner div,
    *[class*="cookie"] p,
    *[id*="cookie"] div {
        margin-bottom: 6px !important;
        font-size: 0.85rem !important;
        line-height: 1.25 !important;
    }
    
    /* REMOVED: Testimonials mobile styles moved to testimonials-unified.css */
}

/* === LOADING STATES === */
.loading-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: loading 1.5s infinite !important;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === MICRO-INTERACTIONS === */
.cta-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* SMOOTH SCROLLING */
html {
    scroll-behavior: smooth !important;
}

/* === ERROR PREVENTION === */
/* REMOVED: Gallery error prevention and image optimization moved to gallery-unified.css */
/* This prevents conflicts between UX system and gallery control system */