/* ==========================================================
   CASAMANCE NATURE
   RESPONSIVE.CSS
   Version 1.0
   ========================================================== */


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:1024px){

    .navigation ul{

        gap:24px;

    }

    .hero-content{

        max-width:560px;

        padding:34px;

    }

    .hero-content h1{

        font-size:3.3rem;

    }

}



/* ==========================================================
   TABLET HOCHFORMAT
   ========================================================== */

@media (max-width:900px){

    .header .container{

        gap:20px;

    }

    .navigation{

        display:none;

    }

    .hero{

        align-items:center;

        text-align:center;

    }

    .hero-content{

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-trust{

        justify-content:center;

    }

}



/* ==========================================================
   SMARTPHONE
   ========================================================== */

@media (max-width:768px){

    .header{

        height:78px;

    }

    .logo img{

        height:48px;

    }

    .btn-nav{

        padding:0 20px;

        font-size:.92rem;

    }

    .hero-content{

        padding:28px;

    }

    .hero-content h1{

        font-size:2.5rem;

    }

    .hero-content p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons a,

    .hero-buttons button{

        width:100%;

    }

    .hero-trust{

        flex-direction:column;

        gap:12px;

    }

}



/* ==========================================================
   KLEINE SMARTPHONES
   ========================================================== */

@media (max-width:480px){

    .hero-content{

        padding:22px;

    }

    .hero-content h1{

        font-size:2rem;

    }

    .hero-badge{

        font-size:.82rem;

    }

    .btn-nav{

        display:none;

    }

    .hero-scroll{

        display:none;

    }

}

/* ==========================================================
   CASAMANCE
   ========================================================== */

@media (max-width:900px){

    .region-grid{

        grid-template-columns:1fr;

    }

.region-images{

    max-width:650px;

    margin:auto;

}

.region-facts{

    grid-template-columns:1fr 1fr;

}


@media (max-width:768px){

    .region-facts{

        grid-template-columns:1fr;

    }

}

    .region-image{

        order:-1;

    }

}

/* ==========================================================
   WARUM DIESES PROJEKT ( am 08.08. eingefügt)
   ========================================================== */

@media (max-width:900px){

    .vision-grid{

        grid-template-columns:1fr;

    }

}


/* ==========================================================
   GEMEINSCHAFT – RESPONSIVE (am 08.08. eingefügt)
   ========================================================== */

@media (max-width:900px){

    .community-grid{

        grid-template-columns:1fr 1fr;

    }

}


@media (max-width:600px){

    .community-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .community-card{

        padding:30px 24px;

    }

    .community-note{

        flex-direction:column;

        gap:6px;

    }

}

/* ==========================================================
   COMMUNITY LIGHTBOX – RESPONSIVE (am 09.08. eingefügt)
   ========================================================== */

@media (max-width:600px){

    .community-cta{

        padding:35px 22px;

        margin-top:50px;

    }


    .community-cta h3{

        font-size:1.4rem;

    }


    .lightbox{

        padding:12px;

    }


    .lightbox-content{

        padding:38px 24px 30px;

        max-height:92vh;

    }


    .lightbox-content h2{

        font-size:1.6rem;

    }

}