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


html,
body{

    width:100%;
    height:100%;

}


body{

    background: #b9792b;
    color:white;

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    overflow:hidden;

}


/* =====================
   LANDING
===================== */


.landing{

    width:100%;
    height:100svh;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}



/* Hintergrund */

.bg-circle{

    position:absolute;

    width:70vw;
    height:70vw;

    max-width:800px;
    max-height:800px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.08);

    animation:rotate 30s linear infinite;

}



.bg-circle::after{

    content:"";

    position:absolute;

    width:10px;
    height:10px;

    background:#b6ff00;

    border-radius:50%;

    top:0;
    left:50%;

}



/* Logo */


.logo{

    position:absolute;

    top:30px;
    left:40px;

}


.logo img{

    width:170px;

}



/* Inhalt */


.content{


    width:90%;

    max-width:900px;

    text-align:center;

    position:relative;

    z-index:2;


}



.subtitle{


    font-size:12px;

    letter-spacing:5px;

    color:#202020;

    text-transform:uppercase;

    margin-bottom:30px;


}



h1{


    font-size:

    clamp(60px,9vw,130px);


    line-height:.9;


    letter-spacing:-6px;


    font-weight:800;


}



h1 span{


    display:block;

    color:#b6ff00;


}



.text{


    max-width:550px;

    margin:35px auto 0;


    color:#202020;


    font-size:18px;

    line-height:1.6;


}




/* Button */


.button{


    display:inline-flex;

    align-items:center;

    gap:15px;


    margin-top:40px;


    padding:18px 40px;


    border-radius:50px;


    border:1px solid #444;


    color:white;


    text-decoration:none;


    font-size:14px;


    font-weight:600;


    letter-spacing:1px;


    transition:.35s;


}



.button:hover{


    background:#b6ff00;

    color:black;

    border-color:#b6ff00;

    transform:translateY(-5px);


}




/* Logo Visual */


.visual{


    position:absolute;


    width:180px;

    height:180px;


    border-radius:30px;


    border:1px solid #333;


    right:12%;

    bottom:15%;


    display:flex;

    align-items:center;

    justify-content:center;




    transform:rotate(-10deg);


    animation:float 5s ease-in-out infinite;

    background-image: url(/thumb/Website_Bilder_Mockup/Amath\ Designs_Ancient_design.png);
    background-size:cover;

}

.visual2{


    position:absolute;


    width:180px;

    height:180px;


    border-radius:30px;


    border:1px solid #333;


    left:12%;

    bottom:15%;


    display:flex;

    align-items:center;

    justify-content:center;




    transform:rotate(-10deg);


    animation:float 5s ease-in-out infinite;

    background-image: url(/thumb/LogoDesign_Neu/LOGO_Textil-04-04-04.png);
    background-size: 100% 100%;

}

.visual,
.visual2 {

    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;

}
.visual span{


    font-size:70px;

    font-weight:800;

    letter-spacing:-5px;


}



/* Footer */


.footer{


    position:absolute;


    bottom:25px;

    left:40px;

    right:40px;


    display:flex;

    justify-content:space-between;


    color:#555;


    font-size:11px;

    letter-spacing:2px;

    text-transform:uppercase;


}



/* Animation */


@keyframes rotate{


    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }


}


@keyframes float {


    0%,
    100% {

        transform:
        rotate(-10deg)
        translateY(0);

    }


    50% {

        transform:
        rotate(-7deg)
        translateY(-15px);

    }

}



@keyframes float2 {


    0%,
    100% {

        transform:
        rotate(10deg)
        translateY(0);

    }


    50% {

        transform:
        rotate(7deg)
        translateY(-15px);

    }

}


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


@media (max-width:1100px){


    .content{

        width:90%;

    }


    h1{

        font-size:
        clamp(55px,8vw,100px);

    }



    .visual,
    .visual2{

        width:140px;

        height:140px;

    }


    .visual{

        right:6%;

        bottom:12%;

    }



    .visual2{

        left:6%;

        bottom:12%;

    }


}





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


@media (max-width:900px){


    .landing{

        padding:20px;

    }


    .bg-circle{

        width:90vw;

        height:90vw;

    }



    .content{

        margin-top:-20px;

    }



    .visual,
    .visual2{


        width:110px;

        height:110px;


        border-radius:20px;


    }



    .visual{

        right:4%;

        bottom:10%;

    }



    .visual2{

        left:4%;

        bottom:10%;

    }


}





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


@media(max-width:600px){


    body{

        overflow:hidden;

    }



    .landing{

        height:100svh;

        padding:15px;

    }



    .logo{

        top:15px;

        left:15px;

    }



    .logo img{

        width:110px;

    }



    .bg-circle{

        width:120vw;

        height:120vw;

        opacity:.6;

    }




    .content{

        width:100%;

        margin-top:-40px;

    }




    .subtitle{

        font-size:10px;

        letter-spacing:3px;

        margin-bottom:18px;

    }




    h1{

        font-size:

        clamp(45px,14vw,70px);

        letter-spacing:-3px;

        line-height:.9;

    }




    .text{

        font-size:15px;

        max-width:320px;

        margin:20px auto 0;

        line-height:1.5;

    }




    .button{

        width:270px;

        max-width:90%;

        margin-top:25px;

        justify-content:center;

        padding:15px;

        font-size:12px;

    }




    .visual,
    .visual2{


        width:75px;

        height:75px;


        border-radius:15px;


    }



    .visual{

        right:12px;

        bottom:75px;

    }



    .visual2{

        left:12px;

        bottom:75px;

    }




    .footer{


        bottom:12px;

        left:15px;

        right:15px;

        justify-content:center;

        font-size:9px;

    }



    .footer span:first-child{

        display:none;

    }



}






/* =====================
   KLEINE HANDYS
===================== */


@media(max-width:380px){



    .logo img{

        width:95px;

    }



    .content{

        margin-top:-55px;

    }



    h1{

        font-size:45px;

    }



    .text{

        font-size:13px;

    }



    .button{

        width:230px;

        margin-top:18px;

    }



    .visual,
    .visual2{

        width:55px;

        height:55px;

        bottom:65px;

    }



}






/* =====================
   GERINGE HÖHE
===================== */


@media(max-height:700px)
and (max-width:600px){



    .logo img{

        width:90px;

    }



    .content{

        margin-top:-70px;

    }



    .subtitle{

        margin-bottom:10px;

    }



    .text{

        margin-top:15px;

    }



    .button{

        margin-top:15px;

        padding:12px;

    }



    .visual,
    .visual2{

        width:50px;

        height:50px;

        bottom:60px;

    }

}

/* =================================
   TABLET + MOBILE CENTER FIX
================================= */

@media (max-width: 900px) {


    .landing {

        height: 100svh;
        min-height: 100svh;

        display:flex;

        align-items:center;
        justify-content:center;

        padding:20px;

    }


    .content {

        width:100%;

        max-width:600px;

        margin:0 auto;

        transform:none;

        position:relative;

        top:auto;

        left:auto;

    }


}




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

@media (max-width:600px) {


    .landing {

        height:100svh;

        overflow:hidden;

    }



    .content {


        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        text-align:center;


        transform:none;

        margin:0;


    }



    .subtitle {

        margin-bottom:20px;

    }



    h1 {

        margin:0;

    }



    .text {

        margin:20px auto 0;

    }



    .button {

        margin-top:25px;

    }


}