*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, sans-serif;
    background:#f7f7f7;
    color:#111;
}

/* ================= SECTION ================= */

.location-section{
    width:90%;
    margin:60px auto;
}

.location-section h2{
    text-align:center;
    margin-bottom:40px;
    font-size:48px;
}

/* ================= WRAPPER ================= */

.slider-wrapper{
    position:relative;
}

/* ================= SLIDER ================= */

.country-slider{
    display:flex;
    gap:20px;

    overflow-x:scroll;
    overflow-y:hidden;

    scroll-behavior:smooth;

    padding-top:30px;   /* FIX: genug Platz oben für Frame */
    padding-bottom:35px;

    margin-bottom:40px;
}

/* Scrollbar sichtbar */
.country-slider::-webkit-scrollbar{
    height:14px;
}

.country-slider::-webkit-scrollbar-track{
    background:#d6d6d6;
    border-radius:50px;
}

.country-slider::-webkit-scrollbar-thumb{
    background:#222;
    border-radius:50px;
    border:3px solid #d6d6d6;
}

.country-slider{
    scrollbar-width:auto;
    scrollbar-color:#222 #d6d6d6;
}

/* ================= ARROWS ================= */

.slider-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,0.6);
    color:#fff;
    font-size:22px;
    cursor:pointer;
    z-index:10;

    display:flex;
    align-items:center;
    justify-content:center;
}

.slider-btn:hover{
    background:#000;
}

.slider-btn.left{
    left:-10px;
}

.slider-btn.right{
    right:-10px;
}

/* ================= COUNTRY CARD (FIXED FRAME ISSUE) ================= */

.country-card{
    min-width:220px;
    flex-shrink:0;
    position:relative;
    cursor:pointer;

    border-radius:16px;

    /* 🔥 WICHTIG: kein clipping mehr */
    overflow:hidden;

    background:#fff;
    padding:4px;

    transition:0.3s;

    box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

/* IMAGE */
.country-card img{
    width:100%;
    height:180px;
    object-fit:cover;
    display:block;

    border-radius:12px;
}

/* TEXT ON IMAGE */
.country-card span{
    position:absolute;
    bottom:12px;
    left:12px;

    color:#fff;
    font-size:20px;
    font-weight:700;

    text-shadow:0 2px 10px rgba(0,0,0,0.8);
}

/* ACTIVE FRAME (FIXED) */
.country-card.active{
    outline:4px solid #111;
    outline-offset:0px;
}

/* HOVER */
.country-card:hover{
    transform:translateY(-5px);
}

/* ================= MAIN VIEW ================= */

.destination-view{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.destination-view img{
    width:100%;
    height:550px;
    object-fit:cover;
    display:block;
}

.destination-content{
    padding:40px;
}

.destination-content h3{
    font-size:42px;
    margin-bottom:15px;
}

.destination-content p{
    font-size:18px;
    line-height:1.8;
    color:#333;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

    .location-section h2{
        font-size:34px;
    }

    .country-card{
        min-width:170px;
    }

    .country-card img{
        height:150px;
    }

    .destination-view img{
        height:320px;
    }

    .destination-content{
        padding:25px;
    }

    .destination-content h3{
        font-size:28px;
    }

    .slider-btn{
        width:42px;
        height:42px;
        font-size:18px;
    }
}