/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/
/* Hauptcontainer für die Header-Content-Sektion */
.header-content-section {
    width: 100%;
    min-height: 400px;
     background-image: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7)),
        url('https://trvllr.net/wp-content/uploads/2024/10/travel-landscape-17-jpg.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Zentriert die Inhalte vertikal */
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

/* Titel-Container mit linker Ausrichtung und Schattierung */
.header-content-title h1 {
    width: 100%;
    max-width: 1200px;
    text-align: left; /* Titel linksbündig */
    margin: auto; /* Optionale Anpassung: Abstand links */
    padding-left: 20px;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Schatten für Text */

}

/* Anpassungen für Navigationselemente */
.des-nav-tabs {
    display: flex;
    width: 100%;
    list-style-type: none;
    padding: 0;
    margin: 0;
    justify-content: space-between;
}

.des-nav-item {
    width: 25%;
    text-align: center;
    border-radius: 0px;
    padding-bottom: 5px;
    background-color: rgba(255, 255, 255, 0.2);
}

.des-nav-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.des-nav-button {
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

        .des-nav-button:hover {
        display: block;
        width: 100%;
        padding: 10px;
        text-align: center;
        text-decoration: none;
        color: #fff;
        background-color: transparent;
        border: none;
        border-radius: 4px;
        transition: background-color 0.3s ease; /* Für einen sanften Übergang beim Aktivieren */
    }
    

/* Stil für den aktiven Tab */
.des-nav-item.active {
    background-color: #ffffff;
    color: #000000;
    border-radius: 10px 10px 0px 0px;
    padding-bottom: 0px;
}

.des-nav-item.active .des-nav-button {
    background-color: #ffffff;
    color: #000000;
    border-radius: 10px;
    box-shadow: none;
}

/* Transparenter Hintergrund für inaktive Tabs */
.des-nav-button:not(.active) .des-nav-item.active:not(.active) {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px 10px 0px 0px;
}

.des-nav-item.active:not(.active) {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px 10px 0px 0px;
    padding-bottom: 10px;
}
    
    
     /* Definiert das einzelne Carousel-Element */
    .destinations-item {
        flex: 0 0 calc(25% - 15px); /* Jedes Element nimmt 25% der Breite ein auf Desktop */
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        height: 450px;
        padding: 0px;
        padding-bottom: 10px;
        transition: transform 0.3s ease-in-out;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    /* Bild-Container */
    .destinations-image-container {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        overflow: hidden;
        margin-bottom: 10px;
        height: 180px;
    }
    
    .destinations-responsive-image {
        width: 100%;
        height: auto;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    
    /* Titel für die Spalten */
    .destinations-title {
        text-align: left;
        font-size: 18px;
        font-weight: bold;
        margin: 20px 15px 10px 15px;
    }
    
    .destinations-text {
        text-align: left;
        font-size: 12px;
        margin: 15px;
        color: #000000;
    }
    
    
    /* Button-Gruppe */
    .destinations-button-group {
        display: flex;
        justify-content: center;
        margin-top: auto; /* Positioniert den Button immer unten */
    }
    
    /* Button-Styling */
    .destinations-button {
        background-color: #70d108;
        color: #000000;
        padding: 6px 20px;
        border-radius: 100px;
        text-decoration: none;
        transition: color 0.3s ease; /* Transition für flüssigen Wechsel */
    }
    
    .destinations-button:hover {
        color: #ffffff; /* Schriftfarbe bei Hover in Weiß */
    }
    
    /* Media Query für Tablets */
    @media (max-width: 768px) {
        .destinations-item {
            width: calc(50% - 10px); /* 2 Spalten für Tablets und Mobilgeräte */
        }
    }
    

.hide {
    display:none;
    }

/* Wrapper für das gesamte Carousel und die Buttons */
.carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Abstand zwischen den Buttons und dem Carousel */
    max-width: 1200px; /* Optionale Maximalbreite */
    margin: 0 auto; /* Zentriert das Carousel */
}

.des-content-section {
    background-color: #ffffff;
     }

/* Zentrierter Titel */
.des-content-section-title {
    margin: auto;
    padding-top: 30px;
    max-width: 1200px;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-left: 20px;;
}

/* Carousel-Container */
.des-content-section-tab {
    display: flex;
    overflow-x: auto; /* Ermöglicht horizontales Scrollen */
    scroll-snap-type: x mandatory; /* Aktiviert das Einrasten der Elemente */
    -webkit-overflow-scrolling: touch; /* Flüssiges Scrollen auf iOS */
    gap: 10px;
    padding: 20px 0;
    scrollbar-width: none; /* Entfernt den Scrollbalken in Firefox */
    max-width: 100%;
}

.des-content-section-tab::-webkit-scrollbar {
    display: none; /* Entfernt den Scrollbalken in Chrome und Safari */
}

/* Anpassung für mobile Geräte */
@media (max-width: 768px) {
    .destinations-item {
        flex: 0 0 70%; /* Nimmt 70% der Breite auf Mobil ein */
        scroll-snap-align: center;
    }

    /* Buttons auf Mobil ausblenden */
    .carousel-prev, .carousel-next, .carousel-prev2, .carousel-next2  {
        display: none;
    }
}

/* Style für die Carousel-Buttons */
.carousel-prev, .carousel-next, .carousel-prev2, .carousel-next2 {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 4px;
}

.carousel-prev:hover, .carousel-next:hover, .carousel-prev2:hover, .carousel-next2:hover {
    background-color: #555;
}

/* Zweiter Teil */
/* Styling für die Carousel-Inhalte */
.des-content-section-tab2 {
    display: flex;
    overflow-x: auto; /* Ermöglicht horizontales Scrollen */
    scroll-snap-type: x mandatory; /* Aktiviert das Einrasten der Elemente */
    -webkit-overflow-scrolling: touch; /* Flüssiges Scrollen auf iOS */
    gap: 10px;
    padding: 20px 0;
    scrollbar-width: none; /* Entfernt den Scrollbalken in Firefox */
    max-width: 100%;
}

.des-content-section-tab2::-webkit-scrollbar {
    display: none; /* Entfernt den Scrollbalken in Chrome und Safari */
}


.continents-item {
    flex: 0 0 calc(25% - 15px); /* Für Desktopansicht: 6 Elemente sichtbar */
    position: relative;
    scroll-snap-align: start;
    margin: 10px;
    border-radius: 10px; /* Border-Radius für die Elemente */
    flex: 0 0 calc(25% - 15px); /* Jedes Element nimmt 25% der Breite ein auf Desktop */
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.continents-image-container {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
}

.continents-responsive-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

/* Positionierung des Titels über dem Bild */
.continents-title {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px;
    font-size: 1.2rem;
    border-radius: 0 0 10px 10px;
}

/* Mobile Ansicht */
@media (max-width: 768px) {
    .carousel-prev,
    .carousel-next, .carousel-prev2, .carousel-next2 {
        display: none;
    }

    .continents-item {
        flex: 0 0 calc(40% - 10px); /* Zwei ganze und ein halbes Element sichtbar */
        width: 100px;
    }

    .des-content-section-tab2 {
        gap: 10px;
        padding: 10px;
    }
}