<style>
/* --- 1. CORE LAYOUT & MOBILE OVERLAP FIXES --- */
.height-slogan {
    height: auto !important;
    overflow: visible !important;
}
#content, .volt-content {
    display: block !important;
    clear: both !important;
}
@media (max-width: 767px) {
    p {
        margin-bottom: 1.5rem !important;
    }
}

/* --- 2. HARD RESET ON CAROUSEL BLOC WRAPPERS --- */
#image,
#image .container,
#image .row, 
#image .col {
    margin: 0 !important;
    padding: 0 !important;
}

/* --- 3. FORCE-OVERRIDE STYLESHEET FLOATS & FIXED WIDTHS --- */
div[data-name="images-banner"],
.images-banner {
    display: grid !important;
    grid-auto-flow: column !important; 
    grid-auto-columns: max-content !important; 
    gap: 10px; 
    width: 100% !important;       
    max-width: 100% !important;   /* Overrides the 250px stylesheet cap */
    float: none !important;        /* Kills the layout float breaking the button */
    clear: both !important;        
    
    padding: 25px 0 !important;
    padding-top: 25px !important;
    padding-bottom: 25px !important;
    margin: 0 !important; 
    
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

div[data-name="images-banner"] > *,
div[data-name="images-banner"] .volt-gallery-item,
div[data-name="images-banner"] .volt-gallery-item-inner,
.images-banner > * {
    display: block !important;
    height: 250px !important; 
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important; 
    border: none !important;
}

div[data-name="images-banner"] a,
.images-banner a {
    display: block !important;
    height: 100% !important; 
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

div[data-name="images-banner"] img,
.images-banner img {
    display: block !important;    
    height: 100% !important;
    width: auto !important;       
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important; 
}

/* --- 4. TABLET VIEW BREAKPOINT (5 Columns) --- */
@media (min-width: 768px) and (max-width: 991px) {
    div[data-name="images-banner"],
    .images-banner {
        grid-auto-flow: row !important; 
        grid-template-columns: repeat(5, 1fr) !important; 
        overflow-x: hidden !important; 
        gap: 10px;
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    div[data-name="images-banner"] > *,
    div[data-name="images-banner"] .volt-gallery-item,
    .images-banner > * {
        height: 180px !important; 
        width: 100% !important;   
    }

    div[data-name="images-banner"] a,
    .images-banner a {
        height: 100% !important;
        width: 100% !important;
    }

    div[data-name="images-banner"] img,
    .images-banner img {
        width: 100% !important;   
        height: 100% !important;
    }
}

/* --- 5. MOBILE VIEW BREAKPOINT (4 Images, Swipe Enabled) --- */
@media (max-width: 767px) {
    div[data-name="images-banner"],
    .images-banner {
        grid-auto-flow: column !important;
        grid-auto-columns: 140px !important; 
        gap: 8px;
        width: 100% !important;
        max-width: 100% !important; /* Overrides the 800px mobile blowout */
        overflow-x: auto !important;
        padding-top: 25px !important; 
        padding-bottom: 25px !important;
    }
    
    div[data-name="images-banner"] > *:nth-child(5),
    .images-banner > *:nth-child(5) {
        display: none !important;
    }
    
    div[data-name="images-banner"] > *,
    div[data-name="images-banner"] .volt-gallery-item,
    .images-banner > * {
        height: 180px !important; 
        width: 140px !important;  
    }

    div[data-name="images-banner"] a,
    .images-banner a {
        height: 100% !important;
        width: 100% !important;
    }

    div[data-name="images-banner"] img,
    .images-banner img {
        width: 100% !important;   
        height: 100% !important;
    }
}

/* --- 6. BASE BUTTON SPECIFICATIONS (DESKTOP) --- */
.button-angebot {
    font-family: "Roboto-Bold" !important;
    font-size: 1.4em !important;
    color: var(--swatch-var-2269) !important;
    border-width: 2px 2px 2px 2px;
    border-radius: 20px 20px 20px 20px !important;
    border-color: var(--swatch-var-2269) !important;
    border-style: solid !important;
    text-decoration: none !important;
    padding: 9px 12px 9px 12px !important;
    text-align: center !important;
    background-color: var(--swatch-var-6892) !important;
    width: 30% !important; 
    display: inline-block !important;
}

/* --- 7. TABLET BUTTON PROFILE --- */
@media (min-width: 768px) and (max-width: 991px) {
    .button-angebot {
        display: block !important;
        width: 65% !important;        
        max-width: 340px !important;  
        margin: 25px auto !important; 
        font-size: 1.2em !important;  
        white-space: nowrap !important;
    }
}

/* --- 8. STANDARD MOBILE BUTTON PROFILE --- */
@media (max-width: 767px) {
    .button-angebot {
        display: block !important;
        width: 100% !important;        
        margin: 20px 0 !important;    
        font-size: 1.1em !important;  
        white-space: nowrap !important; 
        box-sizing: border-box !important; 
    }
}

/* --- 9. SMALL MOBILE BUTTON BREAKPOINT (360px & Under) --- */
@media (max-width: 360px) {
    .button-angebot {
        width: 100% !important;
        font-size: 0.95em !important;   
        padding: 9px 8px 9px 8px !important; 
        letter-spacing: -0.5px !important; 
    }
}
</style>