@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&display=swap');

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html,
body{

    width:100%;
    height:100%;

}

body{

    background:#ffffff;

    overflow:hidden;

    font-family:"Cormorant Garamond", serif;

    color:#303030;

}

#stage{

    position:relative;

    width:100vw;
    height:100vh;

}


/* ======================================================
   GEMEINSAME SZENEN
====================================================== */

#welcome,
#motto,
#flughafen{

    position:absolute;

    left:50%;
    top:38%;

    transform:translate(-50%,-50%);

    width:min(820px,90vw);

    text-align:center;

    opacity:0;

}


/* ======================================================
   WILLKOMMEN
====================================================== */

#welcome h1{

    font-size:4rem;

    font-weight:300;

    letter-spacing:.06em;

    margin-bottom:1.5rem;

}

#welcome p{

    font-size:2.2rem;

    font-weight:300;

    letter-spacing:.03em;

}

/* ======================================================
   MOTTO
====================================================== */

#motto{

    position:absolute;

    left:50%;
    top:75%;

    transform:translate(-50%,-50%);

    width:90%;

    text-align:center;

    opacity:0;

}

#motto p{

    font-size:2.5rem;

    font-weight:300;

    letter-spacing:.03em;

    color:#666666;

}

/* ======================================================
   FLUGHAFENPRINZIP
====================================================== */
#flughafen h2{

    font-family:"Cormorant Garamond", serif;

    font-size:2.8rem;

    font-weight:300;

    margin-bottom:3.5rem;

}

#flughafen p{

    font-size:1.45rem;

    line-height:1.9;

    margin-bottom:2rem;

}

.weiter{

    margin-top:3rem;

}

.weiter a{

    display:inline-block;

    text-decoration:none;

    color:#8a1f1f;

    font-size:1.6rem;

    letter-spacing:.03em;

    transition:.3s;

}

.weiter a:hover{

    color:#b03030;

}


/* ======================================================
   ANIMATIONEN
====================================================== */

.show{

    animation:fadeIn 2s ease forwards;

}

.hide{

    animation:fadeOut 1.5s ease forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}