/*
 Theme Name:   MULTIVISIO LaunchPad Theme
 Theme URI:    https://www.multivisio.de
 Description:  MULTIVISIO LaunchPad Theme. Child-Theme for Generatepress
 Author:       Eike Janssen
 Template:     generatepress
 Version:      1.3.3.6
*/

/* Hier bitte KEINE Custom-Änderungen vornehmen oder weitere Styles hinzufügen! */

body{
	overflow-x:hidden;
}

/* Ermöglicht das horizontale Scrollen am Smartphone, wenn dem Element die Klasse .scrollable hinzugefügt wird. */
/* Desktop-Ansicht: Standard-Aufteilung */
.scrollable .gb-container {
    display: flex;
    flex-wrap: wrap;
}

/* Mobile Ansicht: Horizontal scrollbarer Bereich */
@media (max-width: 768px) {
    .scrollable {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-behavior: smooth;
        padding-bottom: 10px; /* Platz für Scrollbar */
        position: relative;
    }

    .scrollable::before {
        content: ''; /* Pseudoelement, um Platz links zu schaffen */
        flex: 0 0 0px; /* 30 Pixel Platz links */
        pointer-events: none; /* Keine Interaktion mit dem Element */
    }
	
    .scrollable::after {
        content: ''; /* Pseudoelement, um Platz rechts zu schaffen */
        flex: 0 0 0px; /* 30 Pixel Platz rechts */
        pointer-events: none; /* Keine Interaktion mit dem Element */
    }

    .scrollable > .gb-container {
        flex: 0 0 80%; /* Jede Teaser-Box nimmt 80% der Breite ein */
        min-width: 80%; /* Sicherstellen, dass die Breite immer eingehalten wird */
    }

    /* Optional: Scrollbar-Styling */
    .scrollable::-webkit-scrollbar {
        height: 8px;
    }

    .scrollable::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

    .scrollable::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
	
	.scrollable::-webkit-scrollbar-track {
       margin: 0 30px; /* Scrollbar-Abstand links und rechts */
    }
}

/* SlickSlider */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

/* Slides (einzelne Items im Slider) */
.slick-slide {
    display: none; /* Standardmäßig ausgeblendet */
    float: left;
    height: 100%;
    min-height: 1px;
    overflow: hidden;
    margin: 0 10px; 
    box-sizing: border-box;
}

.slick-slide img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px; /* Optionale Abrundung */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optionaler Schatten */
}

.slick-slide.slick-active {
    display: block; /* Nur aktive Slides anzeigen */
}

.slick-dots li.slick-active button:before{
    opacity:0;
}

.slick-dots li button:before{
    color:var(--secondary);
    opacity:1;
}

.slick-dots li button:hover:before, .slick-dots li button:focus:before {
    opacity: 0;
}

/* Linker Pfeil */
.slick-prev {
    left: -50px; /* Abstand links vom Slider */
}

/* Rechter Pfeil */
.slick-next {
    right: -50px; /* Abstand rechts vom Slider */
}

.slick-prev:before, .slick-next:before{
    color:var(--primary);
    font-size:30px;
}


/* Dots (Pagination unten) */
.slick-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.slick-dots li {
    margin: 0 5px;
}

.slick-dots button {
    border-radius: 50%;
    background-color: var(--primary);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slick-dots button:hover,
.slick-dots .slick-active button {
    background-color: var(--primary);
}

/* Pfeile ausblenden bei einer maximalen Breite von 768px (Tablet und kleiner) */
@media (max-width: 768px) {
    .slick-arrow, 
    .slick-next, 
    .slick-prev {
        display: none !important;
    }
}

.slick-initialized .slick-slide {
    display: flex;
}

@media (min-width: 768px) {
    .gb-loop-item:nth-of-type(even) .teaser-img-container {
        order: 1;
    }
}