/* Vorteile Section - Apple Pro Dark Mode Design - 16:9 Format */

.montavis-vorteile-section {
    position: relative;
    width: 100%;
    /* Remove background-color definition to use the unified system */
    color: var(--color-text);
    overflow: visible; /* Changed from hidden to allow proper pin-spacer behavior */
    padding: 80px 0 0; /* Remove bottom padding */
    margin-bottom: 0; /* Ensure no margin at bottom */
    font-family: var(--montavis-font-family);
}

.montavis-vorteile-section::after {
    content: "";
    display: block;
    height: 1px;
    /* Use unified color variable instead of hardcoded #000000 */
    background-color: var(--color-background);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

/* Add styling for GSAP pin-spacer */
.pin-spacer {
    /* Use unified background color variable */
    background-color: var(--color-background) !important; 
    margin: 0 !important;
    padding-bottom: 0 !important;
}

.vorteile-container {
    max-width: 100%;
    padding: 0 0 100px; /* Add padding to container bottom instead */
    position: relative;
    overflow: hidden;
    /* Use unified background color */
    background-color: var(--color-background);
    margin-bottom: 0;
}

/* Heading styles - Apple-style typography */
.vorteile-heading {
    text-align: center;
    margin-bottom: 60px;
    padding: 0 20px;
}

.vorteile-heading h2 {
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 0;
    /* Use unified text color */
    color: var(--color-text);
    letter-spacing: -0.5px;
    line-height: 1.1;
    /* Keep gradient for heading as a unique element */
    background: var(--gradient-title);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Horizontal scroll container - adjusted for taller cards */
.vorteile-horizontal-scroll-container {
    position: relative;
    height: 580px; /* Increased to accommodate taller cards */
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Use unified background color */
    background-color: var(--color-background);
}

.vorteile-items {
    position: absolute;
    display: flex;
    height: 100%;
    will-change: transform;
}

/* Vorteil item styling - adjusted to be narrower and taller */
.vorteil-item {
    min-width: 700px; 
    max-width: 700px;
    height: 470px; /* Taller height for better proportions */
    padding: 0;
    margin-right: 30px;
    display: flex;
    transform: translateZ(0);
    opacity: 0.7;
    transition: opacity 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
    filter: saturate(0.9) brightness(0.95);
}

/* Active card is fully opaque */
.vorteil-item.active {
    opacity: 1;
    filter: saturate(1) brightness(1);
}

/* Card with clean design like in the image */
.vorteil-card {
    width: 100%;
    height: 100%;
    border-radius: 20px; /* Rounded corners like in the image */
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 30px var(--color-shadow);
    transform: translateZ(0);
    transition: all 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
    /* Use unified card background color */
    background-color: var(--color-background-card);
    border: none; /* Remove border completely */
}

.vorteil-card:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    transform: none; /* Remove scale effect on hover */
}

/* Background image container */
.vorteil-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Background image styling - removed hover zoom */
.vorteil-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none; /* Remove transition effect */
    filter: brightness(0.9);
}

/* Specific positioning for the third card's image */
.vorteil-item:nth-child(3) .vorteil-image {
    object-position: right center;
}

.vorteil-card:hover .vorteil-image {
    transform: none; /* Remove zoom effect on hover */
}

/* Content overlay - minimized to focus on image */
.vorteil-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Position content at bottom */
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 60%,
        rgba(0,0,0,0.75) 100%
    );
    padding: 0;
    transition: background 0.3s ease;
}

.vorteil-card:hover .vorteil-content-overlay {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.2) 0%,
        rgba(0,0,0,0.6) 60%,
        rgba(0,0,0,0.85) 100%
    );
}

/* Header section with title - no border and no icons */
.vorteil-header {
    display: flex;
    justify-content: flex-start; /* Left-align since we removed the icons */
    align-items: center;
    margin-bottom: 15px;
    padding: 0 32px;
    position: relative;
    border-bottom: none; /* Remove the line */
    padding-bottom: 0; /* No need for padding without the border */
    justify-content: flex-start !important;
    text-align: left !important;
}

.vorteil-header h3 {
    font-size: 32px; /* Larger title text */
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    text-align: left !important;
}

/* Remove icon container and icon styles */
.vorteil-icon-container {
    display: none; /* Hide icon containers */
}

.vorteil-icon {
    display: none; /* Hide icons */
}

/* Content section with description - hidden initially, revealed on hover */
.vorteil-content {
    padding: 0 32px 32px; /* Add bottom padding to keep text away from card edge */
    position: relative;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.vorteil-card:hover .vorteil-content {
    opacity: 1;
    max-height: 100px; /* Allow enough height for text to display */
}

.vorteil-content p {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    max-width: 600px;
    font-weight: 400;
    letter-spacing: -0.022em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Improve readability */
}

/* Progress indicator - Apple style */
.scroll-progress-container {
    position: absolute;
    bottom: 50px; /* Increase distance from bottom to avoid overlap with white area */
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1px;
    z-index: 10;
}

.scroll-progress-bar {
    height: 100%;
    width: 0;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 1px;
    transition: width 0.1s ease;
}

/* Remove all icon-specific colors since we no longer use icons */
.bi-check2-circle,
.bi-shield-lock,
.bi-lightning-charge,
.bi-translate,
.bi-puzzle {
    display: none;
}

/* Media queries for responsive layout - maintaining new proportions */
@media (min-width: 768px) and (max-width: 1199px) {
    .vorteil-item {
        min-width: 560px;
        max-width: 560px;
        height: 380px; /* Taller proportionally */
        margin-right: 25px;
    }
    
    .vorteil-header {
        padding: 0 24px;
        padding-bottom: 0; /* No border, no padding needed */
        justify-content: flex-start !important;
        text-align: left !important;
    }
    
    .vorteil-header h3 {
        font-size: 28px; /* Slightly smaller on medium screens */
        text-align: left !important;
    }
    
    .vorteil-content {
        padding: 0 24px 24px;
    }
    
    .vorteile-horizontal-scroll-container {
        height: 480px;
    }
}

@media (max-width: 767px) {
    /* Change section for vertical layout */
    .montavis-vorteile-section {
        padding: 60px 0 40px; /* Add padding at bottom */
        overflow: visible !important; /* Ensure scrolling works properly */
    }
    
    .vorteile-container {
        padding: 0 15px 40px; /* Add horizontal padding */
        overflow: visible !important; /* Ensure content can be seen */
    }
    
    /* Remove horizontal scrolling container properties */
    .vorteile-horizontal-scroll-container {
        height: auto !important; /* Auto height for vertical stacking */
        overflow: visible !important; /* Allow content to flow normally */
        display: block; /* Change from flex to block */
        padding-bottom: 0;
        transform: none !important; /* Prevent any transforms */
        position: static !important; /* Remove positioning */
    }
    
    /* Change items container to vertical layout */
    .vorteile-items {
        position: static !important; /* Remove absolute positioning */
        display: block; /* Stack items vertically */
        height: auto !important;
        width: 100% !important;
        transform: none !important; /* Prevent any horizontal transform */
    }
    
    /* Adjust individual items for vertical portrait orientation */
    .vorteil-item {
        min-width: 100% !important; /* Full width */
        max-width: 100% !important;
        height: auto !important; /* Auto height */
        margin: 0 0 15px 0 !important; /* Reduced margin between cards */
        opacity: 1 !important; /* Always fully visible */
        filter: saturate(1) brightness(1) !important; /* Full brightness for all cards */
        transform: none !important; /* Prevent transforms */
        position: static !important; /* Normal positioning */
    }
    
    /* Set a 16:9 aspect ratio for cards on mobile */
    .vorteil-card {
        display: flex;
        flex-direction: column;
        aspect-ratio: unset !important;
        height: auto !important;
        transform: none !important;
        border-radius: 8px; /* Reduce border radius for less rounded corners */
        overflow: hidden; /* Keep content within the card boundaries */
        background-color: var(--color-background-card);
    }
    
    /* Adjust image container to maintain 16:9 aspect ratio */
    .vorteil-background {
        position: relative;
        width: 100%;
        height: auto;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        overflow: hidden;
        border-radius: 0; /* No rounded corners on the image container */
    }
    
    .vorteil-image {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        object-fit: cover;
        object-position: center;
    }
    
    /* Reposition content below image instead of overlapping */
    .vorteil-content-overlay {
        position: relative;
        background: var(--color-background) !important; /* Dark gray background area */
        padding: 10px 16px 14px; /* Reduce padding to make it more compact */
        border-radius: 0; /* No rounded corners */
        margin-top: -1px; /* Reduce gap between image and content */
    }
    
    /* Left-align header and remove text-shadow */
    .vorteil-header {
        padding: 0 !important;
        margin-bottom: 6px !important; /* Reduce bottom margin */
        text-align: left !important;
        justify-content: flex-start !important;
    }
    
    .vorteil-header h3 {
        font-size: 20px !important; /* Slightly smaller font */
        text-align: left !important;
        text-shadow: none !important;
        color: #ffffff;
        line-height: 1.2 !important;
    }
    
    /* Always show content with left alignment */
    .vorteil-content {
        opacity: 1 !important;
        max-height: none !important;
        padding: 0 !important;
        text-align: left;
    }
    
    .vorteil-content p {
        font-size: 14px !important;
        line-height: 1.4 !important;
        color: rgba(255, 255, 255, 0.8);
        text-shadow: none !important;
        margin: 0;
    }
    
    /* Hide the progress indicator on mobile since we're vertical */
    .scroll-progress-container {
        display: none !important;
    }
    
    /* Always show content on mobile */
    .vorteil-content-overlay {
        background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,0.5) 50%,
            rgba(0,0,0,0.85) 100%
        ) !important;
    }
    
    .vorteil-content {
        /* Always visible on mobile */
        opacity: 1 !important;
        max-height: none !important;
        padding: 0 16px 20px !important;
    }
    
    /* Center title text for better mobile appearance */
    .vorteil-header {
        padding: 0 16px !important;
        margin-bottom: 10px !important;
        text-align: left !important;
        justify-content: flex-start !important;
    }
    
    .vorteil-header h3 {
        font-size: 24px !important; /* Better visibility on mobile */
        text-align: left !important;
    }
}

/* Extra small devices - further refinements */
@media (max-width: 375px) {
    .vorteil-card {
        aspect-ratio: 4/5 !important; /* Even taller on very small screens */
    }
    
    .vorteil-header h3 {
        font-size: 18px !important;
    }
    
    .vorteil-content p {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
    
    .vorteil-content-overlay {
        padding: 8px 12px 12px;
    }
}

/* Remove all extra card effects that aren't in the image */
.vorteil-card::before {
    display: none; /* Remove the top gradient line */
}

/* Remove glow animation from progress bar */
@keyframes glow {
    0%, 50%, 100% { box-shadow: none; }
}

.scroll-progress-bar {
    animation: none;
}

/* Remove hover effects on icon container */
.vorteil-card:hover .vorteil-icon-container {
    transform: none;
    transition: none;
}

/* Add this to ensure body background doesn't show through */
html body {
    min-height: 100%;
    /* Use unified background color */
    background-color: var(--color-background);
}

/* Complete mobile scroll fix override */
@media (max-width: 767px) {
    /* Force-disable any potential scroll behavior */
    body.mobile-device,
    html.mobile-device {
        scroll-behavior: auto !important;
    }
    
    /* Completely override section styles for mobile */
    .montavis-vorteile-section,
    #vorteileSection,
    .montavis-vorteile-section.mobile-view {
        padding: 60px 0 40px !important;
        overflow: visible !important;
        position: relative !important;
        transform: none !important;
    }
    
    /* Container overrides */
    .vorteile-container {
        padding: 0 15px 40px !important;
        overflow: visible !important;
        position: relative !important;
        transform: none !important;
    }
    
    /* Horizontal scroll container - disable completely */
    .vorteile-horizontal-scroll-container {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
        position: static !important;
        transform: none !important;
    }
    
    /* Items container - force vertical layout */
    .vorteile-items {
        position: static !important;
        display: block !important;
        height: auto !important;
        width: 100% !important;
        transform: none !important;
        will-change: auto !important;
    }
    
    /* Each item should be full width and static */
    .vorteil-item {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 15px 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        filter: saturate(1) brightness(1) !important;
        transform: none !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transition: none !important;
    }
    
    /* Remove any pin-spacers on mobile */
    .pin-spacer {
        padding: 0 !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        display: block !important;
        position: static !important;
        transform: none !important;
    }
}