/* ==================================
   UnknownMC.DE Responsive Design
   Optimized Minecraft Network Layout
================================== */



/* ================================
   Tablets
================================ */


@media(max-width:1000px){


    .hero{

        padding:60px 25px;

    }



    .hero-content{

        width:95%;

    }



    .logo{

        width:320px;

        max-width:80%;

    }



    h1{

        font-size:55px;

    }



    h1 span{

        font-size:28px;

    }



    p{

        font-size:17px;

    }



    .grid{

        grid-template-columns:

        repeat(2,1fr);

    }



    .team-grid{

        grid-template-columns:

        repeat(2,1fr);

    }



    .ips{

        flex-wrap:wrap;

        justify-content:center;

        gap:20px;

    }



    .server-box{

        width:90%;

    }



    .card{

        padding:25px;

    }



}






/* ================================
   Smartphones
================================ */


@media(max-width:650px){



    body{

        overflow-x:hidden;

    }



    .hero{

        min-height:auto;

        padding:

        70px 15px;

    }



    .hero-content{

        width:100%;

    }



    .logo{

        width:240px;

        max-width:85%;

    }



    .footer-logo,
    .small-logo{

        max-width:180px;

    }





    h1{

        font-size:38px;

        line-height:1.1;

    }





    h1 span{

        display:block;

        margin-top:10px;

        font-size:21px;

    }





    h2{

        font-size:28px;

    }





    h3{

        font-size:22px;

    }





    p{

        font-size:15px;

        line-height:1.6;

    }





    .buttons{

        flex-direction:

        column;

        gap:15px;

        align-items:center;

    }





    .btn{

        width:90%;

        max-width:350px;

        text-align:center;

    }





    nav{

        flex-direction:column;

        gap:10px;

        padding:15px;

    }





    nav a{

        width:100%;

        text-align:center;

        padding:12px;

    }





    .grid{

        grid-template-columns:

        1fr;

    }





    .section{

        margin:

        45px auto;

    }





    .card{

        padding:20px;

        border-radius:18px;

    }





    .server-box{

        width:100%;

        padding:20px;

    }





    .ips{

        flex-direction:

        column;

        gap:15px;

        width:100%;

    }





    .ips div{

        width:100%;

        min-width:0;

    }





    .team-grid{

        grid-template-columns:

        1fr;

        gap:20px;

    }





    .team-container{

        width:92vw;

        margin:

        40px auto;

    }





    .member{

        padding:22px;

    }





    .head{

        width:80px;

        height:80px;

    }





    .rank{

        font-size:14px;

        padding:

        8px 18px;

    }





    footer{

        padding:

        40px 15px;

        text-align:center;

    }





    .footer-buttons{

        flex-direction:

        column;

        gap:12px;

    }



}






/* ================================
   Kleine Smartphones
================================ */


@media(max-width:400px){



    .logo{

        width:200px;

    }



    h1{

        font-size:32px;

    }



    h1 span{

        font-size:18px;

    }



    .btn{

        width:100%;

    }



    .card{

        padding:16px;

    }


}





/* ================================
   Landscape Mobile
================================ */


@media(max-height:500px) and (orientation:landscape){



    .hero{

        padding:

        30px 15px;

    }



    .logo{

        width:180px;

    }



}






/* ================================
   Touch Geräte
================================ */


@media(hover:none){



    .card:hover,
    .member:hover,
    .btn:hover{


        transform:none;

    }



}